webkit重叠故障的解决方法答案

【问题标题】：Workaround for webkit overlapping glitchwebkit重叠故障的解决方法
【发布时间】：2019-06-16 17:35:47
【问题描述】：

在一个页面上工作了几个月后，我注意到基于 webkit 的浏览器中有一个奇怪的行为。我用我在这里问过的技术实现了一个输入元素Create quadrilateral with specific degree 在所有浏览器中一切正常，除了 webkit。

我搜索了这种确切的行为并试图找到现有的解决方法。建议修复的示例：

@supports (-webkit-overflow-scrolling: touch) {
    transform: translate3d(0, 0, 0);
}

但是这不起作用。

我创建了一个有问题的故障项目：https://glitch.com/~safari-bug-overflow

不过，我还创建了更简单的示例：

<div>
    <div class="wrapper">
        <div class="background"></div>
        <div class="content">
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>Test</h1>
        </div>
    </div>
</div>
<style>
.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}
</style>

这是它在大多数浏览器中的外观：

这是它在基于 webkit 的浏览器中的外观

现在我需要找到解决此问题的方法，因为我预计在不久的将来不会有任何修复。我什至不确定这是 webkit 中的错误还是我的 css 中的错误。我认为它是 webkit，因为它适用于所有其他浏览器。

我发现了一个 WebKit 错误报告：https://bugs.webkit.org/show_bug.cgi?id=182520

【问题讨论】：

标签： css webkit visual-glitch

【解决方案1】：

首先，不要将 h1 用于这些目的，因为这将是一场灾难。 :)

我认为您的问题在于内容类。试过min-height吗？

CSS 代码

.content {
    min-height:300px; /* for example */
}

否则，如果你提供一个 js fiddle 或任何东西会很有用:)

【讨论】：

我提供了一个故障项目，您可以分叉和编辑它。它就像 jsfiddle 更好。无论如何，这不是尺寸问题。如果您在 safari 中检查元素，它具有正确的高度，它只是在某个高度后停止渲染元素。你可以在这个Image看到它
好的，但是你在背景类上使用了一个固定的高度，如果你想要最少 5 个元素，设置一个最小高度有什么问题，也可以在内容类中尝试overview:visible;。与此同时，我检查了你的故障项目，并试图让你成为一个稳定的例子......
min-* 还是固定都没有关系。而overview:visible; 并没有改善这种情况。请记住，我提供的项目只是为了演示我的意思。我只是想展示故障/错误。同样的故障可能在不同的情况下发生，但我认为这最适合作为演示。
听起来你不想解决这个问题 :) 在我的 Safari 中，它适用于 .content 上的绝对位置，我看到你已经尝试过？
附加我不得不说你必须接受浏览器以他们自己的方式解释每个 css 代码。如果这是您不使用修复的需要，您可以尝试使用 js 修复此问题

【解决方案2】：

我自己找到了解决方案。有一天我想，也许 webkit 使用了不同的 z 起始位置。然后我试图将 div 移开。它奏效了。

您可以先在转换上应用 translateZ 来修复错误：

.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    -webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}

注意-webkit-transform上的translateZ(-1000px)

【讨论】：