Change integer pixels by .02px rather than 1px #28
Conversation
On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: postcss/postcss-media-minmax#28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
|
Has this been tested in Safari? 1px will have bugs? |
|
I don’t have a Mac myself, but twbs/bootstrap#25177 has been tested extensively in Safari, having been part of Bootstrap for the last three years. I’m not sure how to interpret “1px will have bugs?”, but if the question is whether this solves a real problem with the existing 1px offset, the answer is yes. On high-DPI screens or at non-default zoom levels, Firefox and Chrome do in practice evaluate media queries at fractional https://stackoverflow.com/questions/51566916/why-does-bootstrap-use-a-0-02px-difference-between-screen-size-thresholds-in-its |
On a high-DPI display or with a non-default zoom level, the browser viewport may have a width strictly between md_max = 767px and md_min = 768px. Use only the *_min bounds for consistency. This requires queries with strict inequalities to express upper bounds (width < md_min). Fortunately, that functionality is provided by range context queries. Unfortunately, those are not supported in all browsers. Fortunately, we can compile them away using postcss-media-minmax. Unfortunately, postcss-media-minmax currently subtracts 1px for strict inequalities anyway to work around a Safari rounding bug. Fortunately, 0.02px should be sufficient for that, so I submitted a PR: postcss/postcss-media-minmax#28 Signed-off-by: Anders Kaseorg <anders@zulip.com>
|
I'm sorry to reply to you so late. I ran I think the change to I'll need to do some further research on the JS logic changes, and may be able to merge them after some tweaking. |
According to the Bootstrap developers, using .02px rather than .01px should be sufficient to work around the Safari rounding bug. Fixes postcss#19. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
|
Thanks. It looks like you rewrote all the Git history to change your email address—FYI in the future, better practice for that is to add a I removed the empty commit left on this PR by your rebase. |
|
Okay |
According to the Bootstrap developers, using .02px rather than .01px should be sufficient to work around the Safari rounding bug.
Fixes #19.