156687 2016-04-18 00:47:46 -0700 px, em, rem should behave the same in media queries when page zoom is applied 2022-09-01 04:26:46 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Mac OS X 10.11 NEW https://bugs.webkit.org/show_bug.cgi?id=156684 https://bugs.webkit.org/show_bug.cgi?id=41063 http://codepen.io/cvrebert/pen/KzRXJd HasReduction, InRadar P2 Normal --- 159753 1 webkit webkit-unassigned ahmad.saleem792 danburzo kaelig rik simon.fraser webkit-bug-importer oldest_to_newest 1184596 0 webkit 2016-04-18 00:47:46 -0700 Steps to reproduce: 1. Open http://codepen.io/cvrebert/pen/KzRXJd in Safari/WebKit. 2. Click the "Change View" button. 3. A menu appears. 4. Under "Editor Layout", click the first button on the left. 5. Click the "Change View" button again to dismiss the menu. 6. Zoom in on the page in Safari/WebKit (View->Zoom In, ⌘+) 7. Resize the output pane by dragging the separator on the left edge of the output pane. Actual results: As you resize the output pane, the red, green, and blue bars become translucent or opaque at different widths. Expected results: As you resize the output pane, the red, green, and blue bars should all become translucent or opaque together at the same time when passing a particular width boundary point. This is the behavior exhibited by Chrome, Firefox, and MS Edge when their page zoom features are activated on said testcase webpage. Though non-pinch page zooming is not currently standardized AFAICT, this deviation from other browsers hurts interoperability and offers an unfortunate reason to avoid px-based media queries. See also http://zellwk.com/blog/media-query-units/#2-user-zooms-in Note that the 3 media queries all compute to the same width value under default, non-zoomed circumstances. 1184683 1 webkit-bug-importer 2016-04-18 08:38:49 -0700 <rdar://problem/25778630> 1574395 2 danburzo 2019-09-26 02:29:15 -0700 This is still a problem in Safari Technology Preview 13.1 on macOS, but seems to have been fixed on iOS/ipadOS 13. Safari on macOS continues to factor in the zoom ratio into em and rem units for Media Queries. 1574400 3 danburzo 2019-09-26 02:48:32 -0700 (In reply to Dan Burzo from comment #2) > This is still a problem in Safari Technology Preview 13.1 on macOS, but > seems to have been fixed on iOS/ipadOS 13. > > Safari on macOS continues to factor in the zoom ratio into em and rem units > for Media Queries. However nonsensical these types of media queries might be, the problem also applies to viewport-relative units such as `vw`.