webkit重叠故障的解决方法
在处理一个页面几个月后，我注意到基于webkit的浏览器中出现了一种奇怪的行为。我用我在这里询问的技术实现了一个input元素，所有的浏览器都能正常工作，除了Create quadrilateral with specific degree。
我搜索了这个确切的行为，并试图找到现有的解决方法。建议修复的示例：
@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中的bug还是我的css中的bug。我认为它是webkit，因为它可以在所有其他浏览器中运行。
我发现了一个WebKit错误报告：https://bugs.webkit.org/show_bug.cgi?id=182520
回答 2
Stack Overflow用户
发布于 2019-06-16 09:35:47
我自己找到了一个解决方案。有一天我想，也许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)
Stack Overflow用户
发布于 2019-06-05 19:03:53
首先，不要将h1用于这些目的，在搜索引擎优化方面，这将是一场灾难。:)
我认为你的问题在内容类中。有没有尝试过min-height？
CSS代码
.content {
min-height:300px; /* for example */
}否则，如果你提供一个js小提琴或者其他任何东西，它将非常有用:)
https://stackoverflow.com/questions/56314779
复制相似问题
腾讯云开发者
