Bug 253540 - View->Zoom In makes text sized with viewport units bigger (contrary to other browsers)
Summary: View->Zoom In makes text sized with viewport units bigger (contrary to other ...
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-03-07 15:32 PST by Nick Sherman
Modified: 2023-03-30 14:03 PDT (History)
7 users (show)

See Also:


Attachments
Screenshot comparing the result of zooming in different browsers (873.08 KB, image/png)
2023-03-07 15:32 PST, Nick Sherman
no flags Details
Reduction (110 bytes, text/html)
2023-03-21 21:12 PDT, Myles C. Maxfield
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nick Sherman 2023-03-07 15:32:51 PST
Created attachment 465346 [details]
Screenshot comparing the result of zooming in different browsers

Recent versions of Safari seem to have changed/broken how zooming affects type sized with viewport units (perhaps when used in combination with `calc()` and/or custom properties?).

I noticed the bug when viewing the home page for last year’s Typographics website:
https://2022.typographics.com

In previous versions of Safari, zooming the homepage changed the size of the body type but retained the large type’s size relationship with the viewport – similar to how it works in Chrome and Firefox. Unfortunately I don't know which version of Safari was the one where the bug first appeared, but it is presumably a recent release, since I don't recall seeing this bug when testing page zooming on that same page last year, and the code hasn't changed since then.

If it's helpful, I'm attaching a screenshot showing the homepage zoomed to similar levels in Chrome v110.0.5481.177 on the left, Firefox v110.0.1 in the middle, and Safari v16.3 (18614.4.6.1.6) on the right, all running in macOS Ventura 13.2.1 (22D68).
Comment 1 Alexey Proskuryakov 2023-03-07 18:48:04 PST
Thank you for the report! Do you happen to know when this last worked as expected?
Comment 2 Radar WebKit Bug Importer 2023-03-07 18:48:15 PST
<rdar://problem/106396794>
Comment 3 Nick Sherman 2023-03-09 08:07:58 PST
(In reply to Alexey Proskuryakov from comment #1)
> Thank you for the report! Do you happen to know when this last worked as
> expected?

Unfortunately no. As I mentioned before I don't know which version this first became an issue in but I believe it would have been within the last year.
Comment 4 Nick Sherman 2023-03-15 07:26:26 PDT
Coincidentally, this bug also affects the new 2023 Typographics website too. Compare the difference in zooming this page between the latest versions of Safari and Chrome/Firefox:
https://2023.typographics.com
Comment 5 Myles C. Maxfield 2023-03-15 23:40:30 PDT
When you say "zooming the homepage" can you be more specific? We have like at least 4 different ways of zooming, and I'll need to know which kind you're describing in order to investigate.
Comment 6 Nick Sherman 2023-03-15 23:56:05 PDT
(In reply to Myles C. Maxfield from comment #5)
> When you say "zooming the homepage" can you be more specific? We have like
> at least 4 different ways of zooming, and I'll need to know which kind
> you're describing in order to investigate.

The technique I tested against was pressing Command-Plus Sign (+) or Command-Minus Sign (-)
Comment 7 Myles C. Maxfield 2023-03-21 21:03:37 PDT
This is because the content has font-size:16vw;

When the user does command-plus in WebKit, we increase the size of the text, but other browsers don't.

There is no spec here, and it's not obvious which behavior is correct. On one hand, not matching the other browsers is bad; but on the other hand, having command-plus do nothing in those other browsers is also bad.

How confident are we that this is a regression?
Comment 8 Myles C. Maxfield 2023-03-21 21:12:39 PDT
Created attachment 465544 [details]
Reduction
Comment 9 Antti Koivisto 2023-03-22 05:10:50 PDT
`vw` unit resolution is not affected here. Cmd-+ mutates the `zoom` property which increases the computed font size after unit resolution.
Comment 10 Antti Koivisto 2023-03-22 09:52:16 PDT
You can ignore the zoom with

<div style="font-size: 16vw; zoom: reset">Hello</div>
Comment 11 Simon Fraser (smfr) 2023-03-22 10:01:05 PDT
`zoom` is not a standardized property, however.
Comment 12 Myles C. Maxfield 2023-03-23 17:36:48 PDT
Given that we want command-+ to do things, even when the sizes are in viewport units, and given that there's a workaround (using zoom:reset), I'm inclined to close this as WONTFIX.
Comment 13 Myles C. Maxfield 2023-03-30 14:03:15 PDT
I'm going to do so. Please feel free to re-open this, if you disagree with this conclusion.