Firefox Mobile：使用translate3d動畫的元素從父容器流出

我有一個我用translate3d變換進行了操作的元素。父元素具有overflow: hidden，但在動畫期間的Firefox Mobile 19.0.2上，動畫元素在父元素外部可見。Firefox Mobile：使用translate3d動畫的元素從父容器流出

動畫top屬性而不是translate3d正在工作，但它沒有硬件加速，並且不夠流暢。

它可以在我測試的所有其他移動和桌面瀏覽器上正常工作。

我想這是一個Firefox手機的錯誤，但沒有人有解決這個問題的方法嗎？

這裏的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; 
}

UPDATE：它看起來像問題已經解決了在Firefox 27

來源

2013-03-14 dioslaska

很多搜索後，我發現這裏的解決方法： http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

添加background和opacity: .99到容器元素似乎解決了問題。

，但仍然沒有什麼原因導致

來源

2013-04-30 07:09:46 dioslaska

它沒有背景，但對Firefox很棒。這個問題真的很煩人。 – 2013-09-10 09:49:40

我想不透明問題的信息：0.99技巧，但它是造成佈局被推下來..

所以我嘗試另一個黑客，我發現，通過將其應用於您的樣式表：

* { 
    outline: 1px solid transparent; 
}

來源

2013-09-12 23:56:17

對不起，但我似乎找到了一個更簡單的解決方案。沒有佈局損壞。

如果滾動容器的高度超過設備高度，則此問題消失。縱向和橫向取向有不同的值。

對於我來說，它真的可以在FF v.23的Sencha Touch 2上使用。

來源

2013-09-23 22:18:57 xdcsystems

Firefox Mobile：使用translate3d動畫的元素從父容器流出

回答

相關問題