Question

我遇到了这个抗锯齿的Chrome漏洞，我似乎无法解决这个问题。

我有两种类型的容器与transform属性一起旋转。 A型具有纯色背景。类型B具有带有background-attachment：fixed属性的图像背景，以强制它与其顶部的容器的背景图像对齐。

这两种类型在旋转后在Chrome中呈现锯齿状边缘。 A型的锯齿状边缘用-webkit-backface-visibilty：hidden;来解决，所以我不需要任何帮助。然而，我对B型容器上的那个技巧没有这么幸运。使用该类打破了背景图像和固定图像的视差＆＃39;功能。

我已经尝试过几乎所有可以在各种论坛上找到的补救措施并继续罢工。谁有任何关于如何清理它的想法？下面的示例，最容易在Chrome中的图像容器的底部边缘看到（我在44.0.2403.130（64位）中的版本）！

HTML

<div class="spacer"></div>
<div class="content">
    <div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
        <div class="bottom-divider"></div>
    </div>
</div>
<div class="spacer"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
.content {
    position: relative;
    margin-bottom: 250px;
    z-index: 9999;
}
.back {
    min-height: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.spacer {
    height: 200px;
    background-color:#191919;
    position: relative;
    z-index:9;
}
.bottom-divider::before {
    background-image: url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    content:" ";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.bottom-divider {
    bottom: -50px;
    margin-top: -63px;
    transform: rotate(2deg);
    -webkit-transform:rotate(2deg);
    z-index: 99;
    margin-left: 0;
    width: 110%;
    position: absolute;
    bottom: -57px;
    overflow: hidden;
    height: 77px;
}

https://jsfiddle.net/raf8mb04/

Answer 1

使用-webkit-backface-visibility: hidden;

<强> DEMO

使用Transform CSS时Chrome中的抗锯齿问题

1 个答案: