Question

在我的滑块中，我遇到了问题，在我的淡化效果结束后，我旋转的容器的一部分看起来像一个步骤。我可以在这里提供一个例子：

http://lamit.webflow.com

正如您在滑块中看到的，在效果期间，文本栏的底部是平滑的。然而，在过渡之后，它看起来很奇怪。

关于如何摆脱它的任何想法？

更新

由于此站点在webflow中完成，因此在分析代码时会出现一些css错误（由于Webflow的一些预防）。

相关代码如下：

CSS

.mask {
    left: -2%;
    top: -50px;
    display: block;
    width: 105%;
    margin-right: auto;
    margin-left: auto;
   -webkit-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

HTML

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade">
    <div class="w-slider-mask mask">
        <div class="w-slide">
            <div class="slide-zusatz1">
                <div class="w-container slidertext">
                    <p>Here is some text</p>
                </div>
            </div>
            <img src="myimg.png">
         </div>
    </div>
</div>

由于

Answer 1

您可以启用硬件加速渲染。要在浏览器中触发它，您需要使用任何使用它的css属性。

例如，我将transform: translateZ(0)添加到了旋转的div元素中。结果如下：

enter image description here

Answer 2

如果添加-webkit-backface-visibility: hidden;，它将删除抗锯齿，这对于Chrome和safari中的变换很多事情都有一些修复！

.slider {
    -webkit-backface-visibility: hidden;
}

我的猜测是，当尝试渲染转换元素的背面时，它会以某种方式导致渲染的z-fighting问题。删除背面似乎解决了这个问题。

此外，正如其他答案所提到的，你也可以通过用transform: translateZ(0);明确设置z轴的平移位置来解决这个问题，这样就可以通过不同的路径启动硬件加速并解决问题。

Answer 3

将w-slide上的转换更改为：

transform: translateZ(0px) translateX(-1300px);

在3d变换中添加z-perspective可以解决问题。

或者，您可以使用backface-visibility: hidden;，如其他地方所述。根据您的required browser support，您可能需要使用供应商特定的前缀

浏览器抗锯齿（流畅的线条）

3 个答案: