javascript - border-radius + overflow:hidden (jQuery でアニメーション化する場合)

Question

このjsFiddleを確認してください。

オレンジ色のバーは進行状況バーとして機能しており、円の下の値は進行状況バーの高さです。

overflow:hidden;が無視されている理由と、この問題を解決するにはどうすればよいですか? 明らかに、円の外には何も出てはなりません。

また、これに対するより良い解決策はありますか？

Answer 1

Modified your fiddle a little bit. Here is the link

Modifications: Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css

Check if this works for you.

Answer 2

これは、jQuery や JavaScript とは関係ありません。実際、すべての JavaScript を削除し、li:hover で css を使用して .progressBar の高さを操作すると、とにかくバグに気付くでしょう。

https://code.google.com/p/chromium/issues/detail?id=157218で報告されているように、ブラウザの問題のようです。

回避策として、認識できない CSS 変換をマスク要素に追加してみてください。

.outerContainer {
    -webkit-transform: rotate(0.000001deg);
}

Answer 3

position: absoluteとoverflow: hiddenうまく遊んでいないようdisplay: table/table-cellです。そこにあったテーブルのものを削除して、テキストを垂直方向に中央に配置すると、問題が解決します。少なくとも Firefox では。