iOS Safari 中的轮廓渲染错误

Question

Safari 在 iOS 14 及以下可能存在摘要标签轮廓错误。

如果我打开详细信息标签，它会中断该行：

在 Edge Chromium 中同样如此：

我尝试设置“图标”的宽度和高度，以便将框缩小到最小值，但不幸的是，这不起作用。

这里是 link 网站：https://live.spardasurfsafe-bw.de/

这是使用 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

似乎 Safari 呈现的伪元素不像其他浏览器那样是内联的。它几乎可以在 Chromium 浏览器中重现，在伪元素上使用 display: inline-block; 并删除 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>

为了解决这个问题，我所要做的就是限制“父”元素的溢出（摘要 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>

iOS Safari 中的轮廓渲染错误

Outline rendering Bug in iOS Safari

html

css

safari

outline

ios