css - chrome 上的阴影和旋转 css 行为

Question

当我使用 filter: drop-shadow 时出了点问题 和变换:旋转(##deg)

我附上了一张图片和一个网址，你可以自己看看

请注意，它发生在 chrome 上。

为什么会发生这种情况，我该如何预防？

url to follow

.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>