Incorrect output when using both > and >= (or similar)
hudochenkov opened this issue · comments
There is an issue with reverse order of values, but logic order is the same:
Input:
@media (1024px > width >= 768px) {}
@media (768px <= width < 1024px) {}
@media (1024px >= width > 768px) {}
@media (768px < width <= 1024px) {}
@media (1024px >= width >= 768px) {}
@media (768px <= width <= 1024px) {}
Output:
@media (min-width: 768.001px) and (max-width: 1024px) {}
@media (min-width: 768px) and (max-width: 1023.999px) {}
@media (min-width: 768px) and (max-width: 1023.999px) {}
@media (min-width: 768.001px) and (max-width: 1024px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
Expected output:
@media (min-width: 768px) and (max-width: 1023.999px) {}
@media (min-width: 768px) and (max-width: 1023.999px) {}
@media (min-width: 768.001px) and (max-width: 1024px) {}
@media (min-width: 768.001px) and (max-width: 1024px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
@media (min-width: 768px) and (max-width: 1024px) {}
postcss-media-minmax v.2.1.0
@jonathantneal probably you can help with this as it's related to your PR :)
For px
values step must be set to 1px
Both of this rules are applied for iPad:
@media (width >= 768px) {} /* 768px */
@media (width < 768px) {} /* 767.999px */
According to this article: http://tzi.fr/css/prevent-double-breakpoint and this answer on stackoverflow: http://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap/13611538#13611538
Browsers never report fractional pixel values to media queries, but doing that for other units
Browsers never report fractional pixel values to media queries.
Unfortunately, they do. In at least two browsers, you can actually get caught between pixels. We were all doubters, but I created a few tests to prove this was happening, which we can look for around here or recreate if necessary and re-test. The easiest way to create a fast test:
- create a container with an odd width like 801px.
- append an iframe with 50% width to the container.
- have the iframe use a stylesheet where the background color is red by default, but otherwise green at
max-width: 400px
andmin-width: 401px
.
Besides the iframe use-case which is valid in and of itself, this issue would also happen when a browser window is resized to an odd pixel.
Test Edge, IE11, Chrome, Firefox, and Safari. I believe Edge and Firefox will show a red background color and dev tools will report 400.5px, while window.innerWidth
on the iframe does round to the nearest whole pixel.
Unfortunately, they do. In at least two browsers, you can actually get caught between pixels.
Sad, but confirmed
Did some research here: http://codepen.io/standys/pen/rOPEKN
And here width iframe: http://codepen.io/standys/pen/GpzbBy
IE and iPad safari are totaly differs from chrome about pixels fractions
I have double breakpoints here:
IE and Safari => (min-width: 320.5px) and (max-width: 320px) both true
FF => (min-width: 321px) and (max-width: 320.999px) both true
So both .999 and .001 are unsafe from overlap, any workarounds?
@yisibl Issue is still there. Please, reopen the issue.
Input:
@media (1024px > width >= 768px) {}
@media (768px <= width < 1024px) {}
@media (1024px >= width > 768px) {}
@media (768px < width <= 1024px) {}
@media (1024px >= width >= 768px) {}
@media (768px <= width <= 1024px) {}
Output (v. 2.1.1):
@media (min-width: 769px) and (max-width: 1024px) {} /* Incorrect */
@media (min-width: 768px) and (max-width: 1023px) {} /* Correct */
@media (min-width: 768px) and (max-width: 1023px) {} /* Incorrect */
@media (min-width: 769px) and (max-width: 1024px) {} /* Correct */
@media (min-width: 768px) and (max-width: 1024px) {} /* Correct */
@media (min-width: 768px) and (max-width: 1024px) {} /* Correct */
@hudochenkov OK, do you want to fix it?
According to my test, a .99px
fraction in the output is problematical for Safari, but a .98px
fraction isn’t. In other words, this change should be safe:
/* Input: */
@media (width < 600px) {}
/* Output */
@media (max-width: 599.98px) {}
I’m using the viewport widths of mobile devices as breakpoints to test if a browser has a problem with fractional pixel values (e.g. 374.98px
in iOS Safari; see my test above), and I’m not seeing this problem in Chrome and Firefox on my Android device at all.
What can I do to get this change into the plugin?