Bug 173876 – Details-Summary Element causes rem font-size to be miscalculated for follow-up content

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Anselm Hannemann]

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

[Anselm Hannemann]

To clarify: The bug seems to be with rem values, not only with font-size itself.

[Anselm Hannemann]

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.

[Manuel Rego Casasnovas]

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/

[Manuel Rego Casasnovas]

Created attachment 315787 [details]
Screenshot of the issue in the W3C specs

[Harry Roberts]

I also ran into the same issue yesterday: https://twitter.com/csswizardry/status/897110955448029184

Reduced test-case: http://csswizardry.net/demos/safari-details-text/

[Radar WebKit Bug Importer]

<rdar://problem/39025488>

[Anthony Ricaud]

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.

[Simon Fraser (smfr)]

Fixed a while back.

*** This bug has been marked as a duplicate of bug 177585 ***

[Harry Roberts]

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!