Closed roblevintennis closed 4 years ago
User error!
Ok, I had a bug and so I had line-height
as a ratio not px and that must confuse calc
if you ultimately are trying to do 1.5 + 4px
(understandably so). When I switched to px
it in fact works fine.
Fwiw, I do find it a bit confusing for the .grid
thing to not be working in the example page I mentioned previously so it might be worth examining that example page. But, no bug I think. Closing.
Mixing units in calc() does have some tricky edges! Glad you resolved it 🙂
Here's some interesting use cases on css-tricks that can help illuminate the edges
Thanks for the resource @argyleink 🙏
Hello my Google friends :)
Noticed this in both Brave / Chrome -- version info:
Brave is up to date Version 1.14.84 Chromium: 85.0.4183.121 (Official Build) (64-bit)
Google Chrome is up to date Version 85.0.4183.121 (Official Build) (64-bit)
So, I noticed that in a framework I'm building, that if I used
calc
with two custom properties, the rule essentially got ignored/dumped.I'm using CSS Modules but I noticed these weren't working:
So to do a sanity check I did:
as I "knew" my spacing variables were definitely set, and sure enough I did NOT get my 90px height. In computed:
So then I googled around and found Google's own CSS Custom Properties page at: https://googlechrome.github.io/samples/css-custom-properties/
And noticed that it's not working there either! Looking specifically at the
.grid
class you'll see:but looking at the computed properties there's no
padding
taking affect:I also looked at
.cell
which I'm not as certain about but, it's originally defined with:calc(100% / var(--grid-columns) - var(--grid-gutter))
(I suspect it's using the100%
and throwing out one of the custom properties but that's just a theory).If I manually create a style:
width: calc(var(--grid-columns) - var(--grid-gutter));
:and look at the computed it remains with the
100%
part:so it seems again the simple addition of two custom properties within
calc
is getting thrown out.This seems like a pretty bad bug and it completely breaks the ui component framework I'm writing fwiw. Also, it's easy to miss it because of course the fallback is fault tolerant and falls back to another evaluated value. This feels like it must have worked in the passed and this is a regression ¯_( ͡❛ ͜ʖ ͡❛)_/¯ -- meantime I have this in my code:
UPDATE: I tried to look at this same
.grid
element in Firefox 80.0.1 (64-bit) (and 81.0 (64-bit) after an update), and the exact same thing is happening where the padding rule is not taking affect: