html – Chrome bug,transform：rotate和background-attachment fixed

概述我无法理解为什么旋转会影响固定的移位图像.在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< 我无法理解为什么旋转会影响固定的移位图像.在IE,FF,Opera上,一切都很好.演示： http://jsfiddle.net/4sUCp/10/.请帮忙.

HTML：

<div >HOVER ME</div><div>    <div  >        <div >HOVER ME</div>    </div>    <div  >        <div >HOVER ME</div>    </div></div>

CSS：

.img {    position: @R_502_4613@;    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: @R_502_4613@;    top: 0;    left: 0;    z-index:1;    Transition: 0.5s;}.hover:hover {    transform: translateY(10px) rotate(90deg);}

解决方法 不知道为什么Chrome表现如此,但似乎使用z-index修复了这个问题,我搜索了类似的BUG,但似乎没有报告相同的行为,所以可能是它是一个BUG.

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

Demo

事实上,background-attachment属性与其他元素无关,而且,你的元素是绝对定位的,所以它已经不在流程中了,因为非其他浏览器就是这样,我们可以把它当作一个BUG.

总结

以上是内存溢出为你收集整理的html – Chrome bug,transform：rotate和background-attachment fixed全部内容，希望文章能够帮你解决html – Chrome bug,transform：rotate和background-attachment fixed所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。