Note: this bug is identical to the Issue #124331 which is currently closed and marked as fixed. So I am borrowing parts of the description from that issue. What steps will reproduce the problem? 1. Set font-size on h1 to any value using a viewport unit inside a custom property. 2. resize browser window 3. font size doesn't change along with new viewport width, you have to refresh page. What is the expected result? The font should resize in response to the viewport width change What happens instead? The font doesn't resize Live reduced test case: https://codepen.io/ausi/pen/WNRyOrY The reduced test case includes a fix using -webkit-marquee-increment: 0vw; The issue can also be worked around using `min-height: 1vw` on the element itself or a container of that element (such as the body element).
Thanks for the report, Sara!
<rdar://problem/76713459>
sure thing! I hope this gets some attention and a fix soon <3
(In reply to Sara Soueidan from comment #0) > Note: this bug is identical to the Issue #124331 which is currently closed > and marked as fixed. Was looking for this and couldn’t find it.
Looking at the test case: While not mentioned above in the summary, when calc() is not involved, this works as expected. So it’s somehow specific to calc().
Title should maybe say "viewport units in calc expressions"
Great to have that super-reduced test case
Looks like the bug may be in BuilderCustom::applyValueFontSize: if (primitiveValue.isViewportPercentageLength()) builderState.style().setHasViewportUnits(); There’s no similar call to setHasViewportUnits in the isCalculatedPercentageWithLength case just below.
It’s not about isCalculatedPercentageWithLength, I don’t think, although that may be a more obscure case. It’s simply that a calculated length currently can’t answer the "has viewport units" question. So I see 3 options: 1) Call setHasViewportUnits for all of them, potentially making resizing unnecessarily slow on all websites that use calc() but not things that are viewport-dependent. 2) Add code in calculated value parsing to compute "is viewport dependent" as we go, and store that information in CalculationValue and CSSCalcValue objects. 3) Record whether a calculated value turned out to be viewport dependent as a side effect of performing a calculation and read that boolean out after calling computeLength. Could possibly be stored in CSSToLengthConversionData.
(In reply to Darin Adler from comment #9) > 3) Record whether a calculated value turned out to be viewport dependent as > a side effect of performing a calculation and read that boolean out after > calling computeLength. Could possibly be stored in CSSToLengthConversionData. Would have to make CSSToLengthConversionData non-const, though.
Found out CSSToLengthConversionData already does this "watch for viewport-dependent values" thing, just turns it off for font-size!
I’ve got a working fix for this, but need to construct some regression tests.
Created attachment 426241 [details] Patch
Patch above includes a regression test so this should be good to go
Alan, thanks so much for reviewing!
Committed r276187 (236669@main): <https://commits.webkit.org/236669@main>