178261 2017-10-13 07:40:20 -0700 CSS min-width and max-width media features should not round fractional pixel values 2022-11-25 20:26:04 -0800 1 1 1 Unclassified WebKit CSS Safari 11 iPhone / iPad iOS 11 RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 sime.vidas webkit-unassigned 50167214 anonymousert+1 bugzilla eoconnor mmaxfield redux simon.fraser webkit-bug-importer zalan oldest_to_newest 1359999 0 sime.vidas 2017-10-13 07:40:20 -0700 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. 1360287 1 webkit-bug-importer 2017-10-13 16:03:24 -0700 <rdar://problem/34988263> 1360423 2 redux 2017-10-14 07:19:16 -0700 note this may start having impact on bootstrap-based sites when we merge this https://github.com/twbs/bootstrap/pull/24299 1385105 3 redux 2018-01-02 03:44:30 -0800 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 1883977 4 50167214 2022-07-14 22:06:26 -0700 I can no longer reproduce this bug in Safari 15.4 (17613.1.17.1.6), it looks like it's fixed? 1883990 5 sime.vidas 2022-07-14 23:34:49 -0700 I also can no longer reproduce. I tested on iPhone 8 with iOS 15.5. Only the (min-width: 375px) media query matches now.