drop-shadow and rotation css behavior on chrome

Question

Something is wrong when I use filter: drop-shadow and transform: rotate(##deg)

I've attached an image and a url so you can see for yourself

Note that it happened on chrome.

Why does this happen and how can I prevent this?

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

Seems to be a bug of the current release of Chrome (the stable release).

You can fix it rotating the inner elements instead of the element with the filter:

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