Safariでborder-radiusとtransitionが組み合わさるとおかしくなる
画像を楕円で表示し、マウスオーバーしたら拡大(ズーム)させたかった。
<div class="thumbnail">
<img src="sample.jpg">
</div>
.thumbnail {
position: relative;
width: 250px;
height: 250px;
border: 2px solid #ccc;
border-radius: 125px / 125px;
overflow: hidden;
z-index: 1;
}
.thumbnail img {
-webkit-transition: -webkit-transform 0.3s linear;
-moz-transition: -moz-transform 0.3s linear;
-o-transition: -o-transform 0.3s linear;
-ms-transition: -ms-transform 0.3s linear;
transition: transform 0.3s linear;
z-index: -1;
}
.thumbnail:hover {
border: 2px dotted #ccc;
}
.thumbnail:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
Chromeなどでは、理想どうりに動いたが、Safariでは、一瞬四角い画像が表示されてからズームする。
border-radius,transitionいずれをなくすと四角い画像が表示されることはない。(表示されているのかもしれないが、人間の目には見えない…)
Author And Source
この問題について(Safariでborder-radiusとtransitionが組み合わさるとおかしくなる), 我々は、より多くの情報をここで見つけました https://qiita.com/mimoe/items/dcdea8c8bcb13875a458著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .