时间戳

首页 > 解决方案 > iOS Safari 中的轮廓渲染错误

html - iOS Safari 中的轮廓渲染错误

问题描述

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

如果我打开详细信息标签，它将打破这一行： iOS大纲错误

在 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>

标签： htmlcssiossafarioutline

解决方案

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

推荐阅读