|Summary:||font-size with viewport units in calc() doesn't change when viewport resizes|
|Product:||WebKit||Reporter:||Sara Soueidan <sara.soueidan>|
|Component:||Layout and Rendering||Assignee:||Darin Adler <darin>|
|Severity:||Normal||CC:||bfulgham, darin, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, heycam, macpherson, menard, mmaxfield, rik, simon.fraser, twilco.o, webkit-bug-importer, zalan|
Description Sara Soueidan 2021-04-15 10:59:05 PDT
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).
Comment 1 Simon Fraser (smfr) 2021-04-15 11:16:11 PDT
Thanks for the report, Sara!
Comment 3 Sara Soueidan 2021-04-15 11:17:55 PDT
sure thing! I hope this gets some attention and a fix soon <3
Comment 4 Darin Adler 2021-04-15 12:50:36 PDT
(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.
Comment 5 Darin Adler 2021-04-15 12:53:45 PDT
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().
Comment 6 Darin Adler 2021-04-15 12:54:09 PDT
Title should maybe say "viewport units in calc expressions"
Comment 7 Darin Adler 2021-04-15 12:55:52 PDT
Great to have that super-reduced test case
Comment 8 Darin Adler 2021-04-15 13:00:54 PDT
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.
Comment 9 Darin Adler 2021-04-15 14:10:08 PDT
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.
Comment 10 Darin Adler 2021-04-15 14:11:09 PDT
(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.
Comment 11 Darin Adler 2021-04-15 15:08:33 PDT
Found out CSSToLengthConversionData already does this "watch for viewport-dependent values" thing, just turns it off for font-size!
Comment 12 Darin Adler 2021-04-16 08:30:17 PDT
I’ve got a working fix for this, but need to construct some regression tests.
Comment 14 Darin Adler 2021-04-16 15:35:27 PDT
Patch above includes a regression test so this should be good to go
Comment 15 Darin Adler 2021-04-16 18:06:28 PDT
Alan, thanks so much for reviewing!