Bug 178261 - CSS min-width and max-width media features should not round fractional pixel values
Summary: CSS min-width and max-width media features should not round fractional pixel ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-10-13 07:40 PDT by Šime Vidas
Modified: 2018-02-13 19:40 PST (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Šime Vidas 2017-10-13 07:40:20 PDT
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.
Comment 1 Radar WebKit Bug Importer 2017-10-13 16:03:24 PDT
Comment 2 Patrick H. Lauke 2017-10-14 07:19:16 PDT
note this may start having impact on bootstrap-based sites when we merge this https://github.com/twbs/bootstrap/pull/24299
Comment 3 Patrick H. Lauke 2018-01-02 03:44:30 PST
Note that Bootstrap 4 now uses fractional viewport values, and yes first reports of incompatibilities are coming in...


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