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

Question

我遇到了这个我似乎无法解决的抗锯齿 Chrome 错误。

我有两种使用 transform 属性旋转的容器。 A 型具有纯色背景。类型 B 有一个带有 background-attachment:fixed 属性的图像背景，以强制它与它所在的容器的背景图像对齐。

这两种类型在旋转后都会在 Chrome 中呈现锯齿状边缘。类型 A 的锯齿状边缘已通过 -webkit-backface-visibilty: hidden; 解决，因此我不需要任何帮助。但是，我在容器类型 B 上的那个技巧没有这样的运气。使用该类破坏了背景图像和固定图像“视差”功能。

我已经尝试了几乎所有可以在各种论坛上找到的补救措施，并且一直坚持不懈。有人对如何清理这个有任何想法吗？下面的示例，最容易在 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