Using calc() for columns width

[IvanKalinin]

In Firefox the gird with widths of *.333333% have a "half-pixel" issue on certain window widths..
To resolve the problem, use css calc() to let browsers calculate actual width by themselves instead of hardcoded values.

[MartijnCuppens]

Which browserversion, OS and screenwidth are you testing on? I can't really reproduce this at the moment.

[IvanKalinin]

@MartijnCuppens

how to reproduce:

1. The bug reproduces only in Firefox
2. The container should have dynamic width (e.g. .container-fluid)
3. Columns should have flex-basis. *.3333333% (e.g. col-4)
4. Add borders to be able to see the bug
5. Open the template in responsive mode and change width pixel by pixel.
6. See the bug in some certain window width

Watch a video

[XhmikosR]

Can you try with a different DPI setting too?

I've definitely hit similar inconsistencies with rounding on Firefox.

[IvanKalinin]

It is interesting.
Seems like it reproduces on certain DPIs.
It is easily reproduces on my external LG 34'' screen but when I move browser window in MacBook screen there it no rounding problems.

[XhmikosR]

For me 125% on a Windows 7 VM triggered it IIRC.

[MartijnCuppens]

I could just reproduce this behaviour with browser zoom. This PR fixes the issue and I think this is a better approach than the rounding we have now.

Maybe it's worth reconsidering adding postcss-calc to optimise the calc() functions if we continue with this? (#23582)

[XhmikosR]

We need to check if we have other places we need to do such changes.

And we can look into postcss-calc if this lands.

[MartijnCuppens]

I did some tests with postcss-calc, turns out it transforms calc() functions like calc(100% / 3) into 33.33333%, so we'll just end up with the same problem.

[XhmikosR]

We can look into that later, @MartijnCuppens https://github.com/postcss/postcss-calc#preserve-default-false

[XhmikosR]

How about other places? I know for sure we use this in embed and we have a ticket for sure.

[XhmikosR]

Found it #26284

Can someone tackle that in a separate PR too?

[MartijnCuppens]

I just tackled it in this PR: #25894. Haven't yet checked if it solves #26284.

[XhmikosR]

Thanks but that adds another feature too :/

It's always better to split this stuff to be able to merge faster.

Anyway, let's not get more sidetracked here :) Thanks for all the help @MartijnCuppens!

[mdo]

I'm inclined to skip this in v4. It only happens on zooming or non-standard DPIs it seems. I'm also wary of adding calc expressions to all our grid classes (it's a lot of them) for performance reasons.

[patrickhlauke]

i'll just note that increasingly there's no point talking about "non-standard DPIs", as more devices come along with different DPIs and there's no clear "standard DPIs" anymore...

[XhmikosR]

Yeah, I agree with Patrick on this one. DPIs != 100% will be more and more frequent.

[MartijnCuppens]

I made a PR for postcss-calc in postcss/postcss-calc#61. With this option we could simplify some calc expressions like calc(100% / 4) to 25%.

[mdo]

Noted on the DPI conversation. I'm still inclined to leave this as-is, but let me think on it a bit more.

On hold for now

[mdo]

Let this one sit and coming back to it, going to punt on it. Thanks, though!

[ysds]

I believe this is worth revisiting for v5.

[ysds]

oh I mistakenly re-opened this instead of issue. Close this and create a new issue for clarity.