Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fractional part is not generated when using < or > with px values #19

Open
simevidas opened this issue Aug 4, 2017 · 3 comments · May be fixed by #28
Open

Fractional part is not generated when using < or > with px values #19

simevidas opened this issue Aug 4, 2017 · 3 comments · May be fixed by #28

Comments

@simevidas
Copy link

simevidas commented Aug 4, 2017 •
edited
Loading

I'm testing this plugin on Codepen. (Click on the icon in the top right corner of the CSS panel, and then click "View compiled CSS.")

Source:

@media (40em <= width < 60em) {}
@media (400px <= width < 600px) {}

Generated:

@media (min-width: 40em) and (max-width: 59.999em) {}
@media (min-width: 400px) and (max-width: 599px) {}

Could you explain why the plugin generates 599px instead of 599.999px, like with the em value? This is needed because without it, values between 599px and 600px aren't included in the media query, but they should be according to width < 600px.
@Semigradsky
Copy link
Member

@simevidas see #14

@andersk
Copy link

andersk commented Feb 4, 2021

To work around that Safari rounding bug, Bootstrap uses a 0.02px difference rather than 0.01px: twbs/bootstrap#25177. Perhaps that would work here?

andersk added a commit to andersk/postcss-media-minmax that referenced this issue Feb 4, 2021
@andersk
Change integer pixels by .02px rather than 1px
01239f1 
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>
@andersk andersk linked a pull request Feb 4, 2021 that will close this issue
Open
yisibl pushed a commit that referenced this issue Jul 15, 2022
@andersk @yisibl
Change integer pixels by .02px rather than 1px
bea47d6 
According to the Bootstrap developers, using .02px rather than .01px
should be sufficient to work around the Safari rounding bug.

Fixes #19.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
andersk added a commit to andersk/postcss-media-minmax that referenced this issue Jul 15, 2022
@andersk
Change integer pixels by .02px rather than 1px
92c4dd3 
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>
@simevidas
Copy link
Author

The WebKit bug has been fixed in Safari 15.4 a few months ago:

https://bugs.webkit.org/show_bug.cgi?id=178261

@romainmenke romainmenke mentioned this issue Jan 16, 2023
Open
@romainmenke romainmenke mentioned this issue Mar 30, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Change integer pixels by .02px rather than 1px andersk/postcss-media-minmax
3 participants
@andersk @simevidas @Semigradsky