iOS Safari 中的轮廓渲染错误

Question

Safari on iOS 14 and probably below has a bug with the outline of the summary tag.

If I open the details tag it will break the line:

And the same thing in Edge Chromium:

I tried setting the width and height of the "icon" in order to reduce the box to the minimum but unfortunately that does not work.

Here is a link to the website: https://live.spardasurfsafe-bw.de/

Here is a code snipped with the used css:

 summary { margin-bottom: 1rem; position: relative; } summary::marker, summary::-webkit-details-marker { color: transparent; } summary::after { content: "+"; position: absolute; font-size: 2em; top: -.3em; margin-left: 10px; transition: all 0.5s; } details[open] summary::after { transform: translate(5px,0) rotate(45deg); }

 <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details>

Answer 1

It seems that Safari renders pseudo elements not inline as the other browsers. It can almost reproduced in Chromium browsers with display: inline-block; on the pseudo-element and removing position: absolute :

 summary { margin-bottom: 1rem; position: relative; } summary::marker, summary::-webkit-details-marker { color: transparent; } summary::after { content: "+"; font-size: 2em; position: relative; top: 5px; margin-left: 10px; transition: all 0.5s; display: inline-block; line-height: 0; } details[open] summary::after { transform: translate(5px,0) rotate(45deg); }

 <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details>

In order to fix this issue all I had to do was to restrict the overflow for the "parent" element (summary overflow: hidden; ):

 summary { margin-bottom: 1rem; position: relative; overflow: hidden; } summary::marker, summary::-webkit-details-marker { color: transparent; } summary::after { content: "+"; font-size: 2em; position: relative; top: 5px; margin-left: 10px; transition: all 0.5s; display: inline-block; line-height: 0; } details[open] summary::after { transform: translate(5px,0) rotate(45deg); }

 <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details> <details> <summary>foo</summary> <ul> <li>bar</li> <li>baz</li> </ul> </details>