Chrome错误，transform:rotate和background-attachment固定

Question

我不明白为什么旋转会影响固定位移的图像。在IE，FF和Opera上，一切正常。演示：http://jsfiddle.net/4sUCp/10/。请帮忙。

HTML：

<div class="hover">HOVER ME</div>
<div>
    <div class="img" style="left:0;">
        <div class="hover">HOVER ME</div>
    </div>
    <div class="img img2" style="right:0;">
        <div class="hover">HOVER ME</div>
    </div>
</div>

CSS：

.img {
    position: absolute;
    margin-top: 20px;
    height: 200px;
    width: 50%;
    background: url("http://goo.gl/jY7Kwv");
    background-size: cover;
    background-attachment: fixed;
}
.img2 {
    background: url('http://hq-wallpapers.ru/wallpapers/2/hq-wallpapers_ru_girls_9386_1920x1080.jpg');
    background-size: cover;
    background-attachment: fixed;

}
.img:hover {
    width: 80%;
    z-index: 2;
}
.hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    transition: 0.5s;
}
.hover:hover {
    transform: translateY(10px) rotate(90deg);
}

- Tom910

---

将 z-index: -1; 添加到文本中似乎可以解决问题。演示 - Ruddy

Answer 1

不确定为什么Chrome会出现这种情况，但似乎使用z-index可以解决问题。我搜索了类似的错误，但没有发现报告相同的行为，所以可能是一个bug。

.hover {
    z-index:1;
    /* Other properties */
}

演示

事实上，background-attachment属性与其他元素无关，此外，您的元素已定位为absolute，因此它已经脱离了文档流，由于其他浏览器不会表现出这种情况，我们可以将其视为一个错误。

- Mr. Alien

---

差一点就行了。其实是同样的事情，只是我把它放在图像后面。 - Ruddy

感谢您的演示。我使用了这样的代码：http://jsfiddle.net/4sUCp/10/，但仍然遇到问题，只有在Chrome浏览器中出现。是否可以重新设计HTML和CSS以解决这个问题？ - Tom910

您的文本甚至不可见，您能分享一下您所尝试实现的模型，我可以协助您使用更好的CSS进行改进。 - Mr. Alien

@Mr. Alien，我已经更新了演示http://jsfiddle.net/4sUCp/11/。如果你在.img内部悬停在.hover元素上，图片会跳动。 - Tom910

@user2978570，我已经看到了，但设计看起来不太好，我希望您能创建一个模型，这样我就可以为您提供一些好的解决方案。请在问题中使用线框图解释您要做什么。 - Mr. Alien

Answer 2

这也可以通过从 .img 中删除 position:relative 属性来解决（根据 OP 的示例，我看不出选择器需要此属性的原因）：

.img {
    margin-top: 20px;
    height: 200px;
    width: 100%;
    background: url("http://goo.gl/jY7Kwv");
    background-size: cover;
    background-attachment: fixed;
}

例子：http://jsfiddle.net/4sUCp/9/

正如Alien先生所提到的，这可能是由于您当前的CSS与Chrome存在bug。

我建议在同一级别上使用position: relative | absolute多个元素时，设置自己的z-index。如果未设置，则应用z-index：auto。不要让机器接管您的CSS。

- mikedidthis

---

感谢您的演示。我使用了这样的代码：http://jsfiddle.net/4sUCp/10/ 有没有更好的方法重新设计HTML和CSS？ - Tom910