thả bóng và xoay css hành vi trên chrome

Question

Cái gì là sai khi tôi sử dụng bộ lọc: thả bóng và transform: rotate (## độ)

Tôi đã kèm theo một hình ảnh và một url để bạn có thể nhìn thấy cho chính mình

Lưu ý rằng điều đó đã xảy ra trên Chrome.

Tại sao điều này xảy ra và làm cách nào để ngăn chặn điều này?

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

Có vẻ là một lỗi của phiên bản hiện tại của Chrome (phiên bản ổn định).

Bạn có thể sửa chữa nó xoay các yếu tố bên trong thay vì nguyên tố này với bộ lọc:

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