Fix colWidth calculation issue #25
Conversation
There are sub-pixel differences between col widths returned by different browsers, when the width is not defined in absolute pixel values, e.g. a percentage. In Firefox, for example, it causes a three column layout to be rendered as a two column layout. See this fiddle forked from your example in the README: https://jsfiddle.net/avwgdurp/ When you resize the preview container you notice in Firefox the layout jumps between 2 and 3 columns, whereas in Chrome there are always 3 columns rendered. This change floors the col width value to the whole pixel, ensuring their combined width is never wider than the container.
|
Unfortunately, There's no real fix for this issue due to the lack of standardization around sub-pixel rendering. Browsers handle sub-pixels in different ways; some round up, some round down, and some do both. If we round down the value returned by colWidth, we might get overlapping elements in browsers that round up sub-pixels, and if we round up colWidth, we risk creating columns that are wider than their components. Check out these articles for more info on this issue: |
|
I see, I'll close it then. Thanks for the response and the articles! |
Instead of flooring col width down to the whole pixel, this approach tries to reduce the value by 0.0001 of a pixel, until we have proper layout. It happens in a short loop with limited iteration count. It also happens only in the case when there is sub pixel rounding issue.
|
I tried one more idea to solve this issue. Please let me know what you think about it, I explained it in the commit message. |
|
Have you tested this? |
|
Yes, I did, please check this fiddle based on the version of MagicGrid from this PR. When you resize the window in Firefox, you can see that the layout always keeps 3 columns, instead of jumping between 2 and 3 columns like in the original one. https://jsfiddle.net/txyojrq3/
|
There are sub-pixel differences between col widths returned by different browsers, when the width is not defined in absolute pixel values, e.g. a percentage. In Firefox, for example, it causes a three column layout to be rendered as a two column layout.
See this fiddle forked from your example in the README: https://jsfiddle.net/avwgdurp/
When you resize the preview container you notice in Firefox the layout jumps between 2 and 3 columns, whereas in Chrome there are always 3 columns rendered.
Chrome:
Firefox:
This change floors the col width value to the whole pixel, ensuring their combined width is never wider than the container.