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

首先，不要将 h1 用于这些目的，在搜索引擎优化方面这将是一场灾难。 :)

我认为您的问题出在内容 class 上。试过min-height了吗？

CSS代码

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

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

Answer 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)

webkit 重叠故障的解决方法

Workaround for webkit overlapping glitch

css

webkit

visual-glitch