html - オーバーフロー: 非表示のプロパティが機能しない iPhone、iPad の Jquery 垂直スライダー

Question

電球の形状 (楕円形でも問題ありません) の垂直スライダーのプロトタイプを作成する必要があります。問題は、スライダーをドラッグすると、スライダーが長方形に成長するため、iphone と ipad で (親要素のように) 楕円形にならないことです。タッチ ジェスチャを追加できましたが、overflow:hidden プロパティが正しく機能していないようです。

Answer 1

スライダー コンテナーに border-radius を指定し、overflow: hidden を追加します。iOS と Android で動作します。

.container {
width: 100%; /* Your slider width, percent or pixels... */
height: 100%; /* Your slider height*/
border-radius: 100%; /* Circle or ellipse, depends of parent element */
overflow: hidden; /* Crop content to border */
background: yellow; /* Irrelevant */
position: relative; /* Takes control of inner elements, could be irrelevant too */
}

その中のすべてが境界線にトリミングされます。