android – Firefox Mobile:使用translate3d动画的元素从父容器中流出
作者:互联网
我有一个元素,我使用translate3d转换.父元素具有溢出:隐藏,但在动画期间,在Firefox Mobile 19.0.2上,动画元素在父元素之外可见.
动画顶部属性而不是translate3d是有效的,但它不是硬件加速而且不够平滑.
它适用于我测试的所有其他移动和桌面浏览器.
我想这是一个Firefox Mobile漏洞,但有没有人有解决方法呢?
这是用于测试的jsfiddle链接:http://jsfiddle.net/dioslaska/6h8qe/
最小的测试用例:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
CSS:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
更新:看起来问题在Firefox 27中得到了解决.
解决方法:
经过大量的搜索,我找到了一个解决方法:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
向容器元素添加背景和不透明度:.99似乎可以解决问题.
但仍然没有关于导致问题的原因的信息
标签:android,css3,firefox,mobile,translate3d 来源: https://codeday.me/bug/20190901/1780957.html