Bug 173876 - Details-Summary Element causes rem font-size to be miscalculated for follow-up content
Summary: Details-Summary Element causes rem font-size to be miscalculated for follow-u...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: All macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-06-27 08:36 PDT by Anselm Hannemann
Modified: 2018-03-29 20:41 PDT (History)
12 users (show)

See Also:


Attachments
Reduced Test Case for details-element rem font-size rendering bug (495 bytes, text/html)
2017-06-27 08:36 PDT, Anselm Hannemann
no flags Details
Another reduced test case showing the problem (161 bytes, text/html)
2017-07-18 03:24 PDT, Manuel Rego Casasnovas
no flags Details
Screenshot of the issue in the W3C specs (398.01 KB, image/png)
2017-07-18 03:26 PDT, Manuel Rego Casasnovas
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>