iOS Safari 中的大纲渲染错误答案

【问题标题】：Outline rendering Bug in iOS SafariiOS Safari 中的大纲渲染错误
【发布时间】：2021-03-25 08:57:09
【问题描述】：

iOS 14 及以下版本的 Safari 存在摘要标签轮廓的错误。

如果我打开详细信息标签，它将换行：

在 Edge Chromium 中也是如此：

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

这里是网站的链接：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>

【问题讨论】：

您能否更新您的 sn-p 以显示轮廓并因此显示问题？
好吧，我无法更新 sn-p，因为它已经在 iOS Safari 上显示了问题。在其他浏览器中，它看起来完全没问题。我添加了指向该网站的链接。也许这有帮助
啊，我一定是解释错了，因为在我的浏览器（Edge）上，sn-p 中没有显示轮廓。我应该看什么？
我在 Edge 中添加了截图。如果您在“图标”太大的元素中使用标签，则可以看到它会导致 Safari 中的错误

标签： html css ios safari outline

【解决方案1】：

似乎 Safari 呈现的伪元素不像其他浏览器那样内联。它几乎可以在伪元素上带有display: inline-block; 并删除position: absolute 的Chromium 浏览器中重现：

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>

【讨论】：