Question

我发现了一个有趣的错误（？）。关键是如果你将transform：rotateX（）设置为具有固定背景的div，那么每个浏览器中的背景表现都不同。

请参阅此示例：http://codepen.io/thes01/pen/EZXpBY

＆＃13;

.foo{
   width: 100%;
   height: 300px;
   margin: 10px;
  overflow: hidden;
  transform: rotateX(20deg);
}

.bar{
  height: 100%;
  background: url('http://www.drodd.com/images15/nature13.jpg');
  background-size: cover;
  background-attachment: fixed;
}

＆＃13;

<div class="foo">
  <div class="bar"></div>
</div

＆＃13;

在Chrome和Opera中，对图像存在视差效果，在Edge中，固定属性不适用，IE的行为与我预期的一样 - 转换属性不会影响固定背景。我没试过Firefox。

此外，如果您将变换效果应用于条形而不是foo，那么Chrome中有点滞后。

请注意，其他变换也值得注意 - 例如scale（）和skewX（）做类似的效果，rotateZ（）在滚动时水平移动图像（这里效果很好：https://www.jardasvoboda.cz/（不是我的网站））或180deg角度垂直反转而skewY（）什么都不做奇怪。

你怎么看？这是一个错误吗？哪个浏览器＆＃34;正确＆＃34;？

与css的镀铬物臭虫在有固定背景的div变换

0 个答案: