Viewport unit values affected by Command-+ zoom

• Component: CSS
• Status: RESOLVED FIXED

[Joey Hoer]

Created attachment 254203 [details]
Rendering comparison between browsers

When the browser zoom is zoomed (in or out), viewport unit values are affected, and are no longer relative to the physical viewport. This can lead to layout issues.

This behaves as expected in Chrome and Firefox.

See http://codepen.io/joeyhoer/full/BcbsH/ for a demo.

[Simon Fraser (smfr)]

Does this still reproduce in a WebKit nightly?

[Joey Hoer]

Yes this issue is still present in WebKit r188253

(In reply to comment #1)
> Does this still reproduce in a WebKit nightly?

[Simon Fraser (smfr)]

I cannot reproduce. By "browser zoom" do you mean pinch-zoom on the trackpad?

[hexalys]

http://codepen.io/hexalys/full/XbGvvW(In reply to comment #3)
> I cannot reproduce. By "browser zoom" do you mean pinch-zoom on the trackpad?

Joey's example is is not very clear. Here is simple layout with VW units.
http://codepen.io/hexalys/full/XbGvvW

As you zoom in with CMD +, you can see that the VM units remains based on a 100% zoom. e.g. 50% of the viewport width become 75% at 150% zoom etc..

Other browsers will adjust VW units to the rescaled viewport width
according to the zoom ratio.

Without that adjustment, all responsive layouts will be affected.

[Marcus Zanona]

I can confirm the unexpected behaviour:

http://data:text/html,<div%20style="width:100vw;height:100vh;background:red">

an object with width of 100vw and height of 100vh has it's dimensions changed when zooming in or out the page which is not the expected behaviour.

Firefox seems to implement this accordingly.

[Radar WebKit Bug Importer]

<rdar://problem/25880356>

Is there a timeline to fix this issue? :)

[Asher]

Seriously, why isn't this solved yet? It seems a basic premise of viewport-based design, so why is it not being taken seriously after more than 2 full years?

[Simon Fraser (smfr)]

Created attachment 327827 [details]
Patch

[EWS Watchlist]

Comment on attachment 327827 [details]
Patch

Attachment 327827 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/5398762

New failing tests:
fast/css/viewport-units-zoom.html

[EWS Watchlist]

Created attachment 327829 [details]
Archive of layout-test-results from ews101 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews101  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[EWS Watchlist]

Comment on attachment 327827 [details]
Patch

Attachment 327827 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/5398789

New failing tests:
fast/css/viewport-units-zoom.html

[EWS Watchlist]

Created attachment 327835 [details]
Archive of layout-test-results from ews104 for mac-elcapitan-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-elcapitan-wk2  Platform: Mac OS X 10.11.6

[Simon Fraser (smfr)]

Created attachment 327836 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 327836 [details]
Patch

Clearing flags on attachment: 327836

Committed r225277: <https://trac.webkit.org/changeset/225277>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.