chrome上的阴影和旋转css行为

Question

当我使用filter时出现问题:drop-shadow和transform:rotate(## deg)

我附上了一张图片和一个网址,以便您自己查看

请注意,它发生在chrome上.

为什么会发生这种情况？如何防止这种情况发生？

请关注

.wrap1,
.wrap2 {
  position: absolute;
  top: 20%;
  height: 40%;
  width: 40%
}
.wrap1 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(5.696863186209043deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(5.696863186209043deg);
  left: 0;
}
.wrap2 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(0deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(0deg);
  left: 50%;
}
.inner,
.inner_color {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}
.inner img {
  width: 100%;
}
.inner_color {
  background-color: blue;
}

<div class="wrap1">
  <div class="inner_color"></div>
  <div class="inner">
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg">
  </div>
</div>

<div class="wrap2">
  <div class="inner_color"></div>
  <div class="inner">
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg">
  </div>
</div>

Answer 1

似乎是当前版本的 Chrome（稳定版本）的一个错误。

您可以修复它旋转内部元素而不是带有过滤器的元素：

.wrap1,
.wrap2 {
  position: absolute;
  top: 20%;
  height: 40%;
  width: 40%
}
.wrap1 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  left: 0;
}

/* the transform is applied to descendats of the wrap1 instead */
.wrap1 div {
  transform: rotate(5.696863186209043deg);
}

.wrap2 {
  -webkit-filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  -webkit-transform: rotate(0deg);
  filter: drop-shadow(rgba(50, 50, 50, 0.4) 10px 10px 10px);
  transform: rotate(0deg);
  left: 50%;
}
.inner,
.inner_color {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}
.inner img {
  width: 100%;
}
.inner_color {
  background-color: blue;
}

<div class="wrap1">
  <div class="inner_color"></div>
  <div class="inner">
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg">
  </div>
</div>

<div class="wrap2">
  <div class="inner_color"></div>
  <div class="inner">
    <img src="http://www.facegift.co.il/PrivateData/Images/15152/1515293_M.jpg">
  </div>
</div>