android–Firefox Mobile：使用translate3d动画的元素从父容器中流出

概述我有一个元素,我使用translate3d转换.父元素具有溢出：隐藏,但在动画期间,在FirefoxMobile19.0.2上,动画元素在父元素之外可见.动画顶部属性而不是translate3d是有效的,但它不是硬件加速而且不够平滑.它适用于我测试的所有其他移动和桌面浏览器.我想这是一个FirefoxMobile漏洞,

我有一个元素,我使用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 – Firefox Mobile：使用translate3d动画的元素从父容器中流出全部内容，希望文章能够帮你解决android – Firefox Mobile：使用translate3d动画的元素从父容器中流出所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。