CSS转换元素会影响其他在Android WebView中使用transform:scale(0.5)的元素 [英] css transform element affects other element which use transform:scale(0.5) in android webview
本文介绍了CSS转换元素会影响其他在Android WebView中使用transform:scale(0.5)的元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
div.tp-border-bottom的边框隐藏在div.tp-banner添加transform属性时,如果我将div.tp-border-bottom:after元素高度设置为2px,则可见,所有这些在android webview平台中
div.tp-border-bottom's border hide when div.tp-banner add transform property, if I set div.tp-border-bottom:after element height to 2px then it is visible, all of this in android webview platform
.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>
推荐答案
尝试将这种样式添加到所有已转换的元素中:
Try to add this style to all the transformed elements:
-webkit-backface-visibility: hidden;
来自类似问题 CSS3悬停效果对Chrome中的其他元素产生了怪异的影响
这篇关于CSS转换元素会影响其他在Android WebView中使用transform:scale(0.5)的元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文