Question

当div.tp-banner添加转换属性时，

div.tp-border-bottom＆＃39; s的边框隐藏，如果我设置div.tp-border-bottom：在元素高度为2px之后它是可见的，所有这一切在android webview平台

＆＃13;

.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);
  }
}*/

＆＃13;

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

＆＃13;

Answer 1

尝试将此样式添加到所有已转换的元素：

-webkit-backface-visibility: hidden;

取自类似问题CSS3 hover effects make weird impact on other elements in Chrome

css transform元素影响在web webview中使用transform：scale（0.5）的其他元素

1 个答案: