Bug 178261 – CSS min-width and max-width media features should not round fractional pixel values

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Šime Vidas]

These two media queries both evaluate to `true` in the latest Safari on an iPhone 6:

@media (max-width: 374.99px) {
  p::before {
    content: "👍";
  }
}

@media (min-width: 375px) {
  p::after {
    content: "👍";
  }
}

Live demo: https://output.jsbin.com/tafogug/quiet

This doesn’t make sense. The viewport width cannot at the same time be ≤ 374.99px and ≥ 375px. WebKit seems to round the fractional pixel value. Why?

Note that this behavior is preventing the postcss-media-minmax plugin from properly polyfilling “range mode” media queries. See: https://github.com/postcss/postcss-media-minmax/issues/19.

[Radar WebKit Bug Importer]

<rdar://problem/34988263>

[Patrick H. Lauke]

note this may start having impact on bootstrap-based sites when we merge this https://github.com/twbs/bootstrap/pull/24299

[Patrick H. Lauke]

Note that Bootstrap 4 now uses fractional viewport values, and yes first reports of incompatibilities are coming in...

https://github.com/twbs/bootstrap/issues/25166

And note the CSS Media Queries 4 spec includes the fractional viewport advice https://github.com/w3c/csswg-drafts/pull/1083

[yisibl]

I can no longer reproduce this bug in Safari 15.4 (17613.1.17.1.6), it looks like it's fixed?

[Šime Vidas]

I also can no longer reproduce. I tested on iPhone 8 with iOS 15.5. Only the (min-width: 375px) media query matches now.