Bug 253540

Summary:

View->Zoom In makes text sized with viewport units bigger (contrary to other browsers)

Product:

WebKit

Reporter:

Nick Sherman <nick>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WONTFIX

Severity:

Normal

CC:

ap, bfulgham, koivisto, mmaxfield, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

See Also:

https://bugs.webkit.org/show_bug.cgi?id=145614

Attachments:

Description	Flags
Screenshot comparing the result of zooming in different browsers	none
Reduction	none

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.