RESOLVED DUPLICATE of bug 177585 173876
Details-Summary Element causes rem font-size to be miscalculated for follow-up content 
https://bugs.webkit.org/show_bug.cgi?id=173876
Summary Details-Summary Element causes rem font-size to be miscalculated for follow-u...
Anselm Hannemann
Reported 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
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
View All Add attachment proposed patch, testcase, etc.
Anselm Hannemann
Comment 1 2017-06-27 08:38:52 PDT
To clarify: The bug seems to be with rem values, not only with font-size itself.
Anselm Hannemann
Comment 2 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.
Manuel Rego Casasnovas
Comment 3 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/
Manuel Rego Casasnovas
Comment 4 2017-07-18 03:26:37 PDT
Created attachment 315787 [details] Screenshot of the issue in the W3C specs
Harry Roberts
Comment 5 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/
Radar WebKit Bug Importer
Comment 6 2018-03-29 20:41:25 PDT
<rdar://problem/39025488>
Anthony Ricaud
Comment 7 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.
Simon Fraser (smfr)
Comment 8 2019-10-21 11:22:35 PDT
Fixed a while back. *** This bug has been marked as a duplicate of bug 177585 ***
Harry Roberts
Comment 9 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!
Note You need to log in before you can comment on or make changes to this bug.