Incorrect output when using both > and >= (or similar)

[hudochenkov]

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 :)

[standy]

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

[jonathantneal]

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:

1. create a container with an odd width like 801px.
2. append an iframe with 50% width to the container.
3. have the iframe use a stylesheet where the background color is red by default, but otherwise green at max-width: 400px and min-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.

[standy]

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?

[hudochenkov]

@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 */

[yisibl]

@hudochenkov OK, do you want to fix it?

[simevidas]

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?