Bug 173876

Summary: Details-Summary Element causes rem font-size to be miscalculated for follow-up content
Product: WebKit Reporter: Anselm Hannemann <info>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: beidson, bfulgham, csswizardry, herr.ernst, info, mcatanzaro, rego, rik, simon.fraser, svillar, t.tom, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: All   
OS: macOS 10.13   
Attachments:
Description Flags
Reduced Test Case for details-element rem font-size rendering bug
none
Another reduced test case showing the problem
none
Screenshot of the issue in the W3C specs none

Description Anselm Hannemann 2017-06-27 08:36:47 PDT
Created attachment 313914 [details]
Reduced Test Case for details-element rem font-size rendering bug

I just discovered a very weird issue with the `details` and `summary` elements in Safari / WebKit. 

When adding a details and summary element to a web page, follow up content will be mis-rendered due to miscalculation in the font-size. The misrendering only affects elements that are calculated based on rem-units.

Note that the issue disappears when triggering a repaint (opening DevTools or window resize, not SplitView, not orientationchange in responsive mode but on real device) after page load.

Please see the reduced test case attached for more information.

Cheers,
Anselm
Comment 1 Anselm Hannemann 2017-06-27 08:38:52 PDT
To clarify: The bug seems to be with rem values, not only with font-size itself.
Comment 2 Anselm Hannemann 2017-06-27 08:45:56 PDT
As a second test you can also copy the source from https://mathiasbynens.be/demo/html5-details-jquery and place the h1 after the details element in the source, then call the file to see the rendering issues. It doesn’t work when doing this in Developer Tools though.
Comment 3 Manuel Rego Casasnovas 2017-07-18 03:24:49 PDT
Created attachment 315786 [details]
Another reduced test case showing the problem


It can also be easily reproducible in the W3C specs. For example:
https://drafts.csswg.org/css-ui-3/
Comment 4 Manuel Rego Casasnovas 2017-07-18 03:26:37 PDT
Created attachment 315787 [details]
Screenshot of the issue in the W3C specs
Comment 5 Harry Roberts 2017-08-15 01:55:06 PDT
I also ran into the same issue yesterday: https://twitter.com/csswizardry/status/897110955448029184

Reduced test-case: http://csswizardry.net/demos/safari-details-text/
Comment 6 Radar WebKit Bug Importer 2018-03-29 20:41:25 PDT
<rdar://problem/39025488>
Comment 7 Anthony Ricaud 2019-10-20 09:26:42 PDT
I can't reproduce this on iOS 12.4.2 nor Safari 13.0.2 on macOS 10.14.6. Seems like it was fixed in an earlier version.
Comment 8 Simon Fraser (smfr) 2019-10-21 11:22:35 PDT
Fixed a while back.

*** This bug has been marked as a duplicate of bug 177585 ***
Comment 9 Harry Roberts 2019-10-21 17:31:04 PDT
Whoa! This was a blast from the past. Thanks to all involved in landing this. It looks like it happened quite a while ago, but I was just able to go back to my client’s project and rip out the hack. Thank you!