Webkit重叠故障的解决方法

Question

在页面上工作了几个月后，我注意到在基于Webkit的浏览器中有一个奇怪的行为。我用这里要求的技术实现了输入元素。创建具有特定度数的四边形在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

Answer 1

我自己找到了解决方案。有一天我想，也许 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;
}

请translateZ(-1000px)注意-webkit-transform