Outline rendering Bug in 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>