css transform 요소는 android webview에서 transform : scale (0.5)를 사용하는 다른 요소에 영향을줍니다.

Question

div.tp-border-bottom의 경계 div.tp-banner는 transform 속성을 추가 할 때 div.tp-border-bottom을 설정하면 숨 깁니다. 요소 높이 후 모든 변형 요소에이 스타일을 추가

.tp-banner { 
 
    width: 100px; 
 
    height: 60px; 
 
    -webkit-transform: translate(0px, 0px) translateZ(0px); 
 
    transform: translate(0px, 0px) translateZ(0px);  
 
} 
 
.tp-border-bottom { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 60px; 
 
} 
 
.tp-border-bottom:after { 
 
    content: ""; 
 
    position: absolute; 
 
    font-size: 0; 
 
    line-height: 0; 
 
    background-color: #e1e1e1; 
 
    -webkit-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 1px; 
 
    -webkit-transform-origin: 0 1px; 
 
    -ms-transform-origin: 0 1px; 
 
    transform-origin: 0 1px; 
 
} 
 
.tp-border-scale:after { 
 
    -webkit-transform: scaleY(0.3333); 
 
    -ms-transform: scaleY(0.3333); 
 
    transform: scaleY(0.3333); 
 
} 
 
/*@media only screen and (-webkit-min-device-pixel-ratio: 3) { 
 
    .tp-border-bottom:after { 
 
    -webkit-transform: scaleY(0.3333); 
 
    -ms-transform: scaleY(0.3333); 
 
    transform: scaleY(0.3333); 
 
    } 
 
}*/

<div class="tp-banner"></div> 
 
<div class="tp-border-bottom tp-border-scale"></div>

Answer 1

시도 안드로이드 웹보기 플랫폼에서, 그것은 볼 수 다음이 모두 2 픽셀하기 :

-webkit-backface-visibility: hidden; 

비슷한 질문에서 가져온 것 CSS3 hover effects make weird impact on other elements in Chrome