前提・実現したいこと
transitionを使用して、ホバーアニメーションのあるボタンを作っています。
発生している問題・エラーメッセージ
作ることはできたのですが、Macのsafari バージョン12.0(13606.2.11)で確認すると、
ホバーした際に一瞬overflow: hidden;が無効になったような挙動になります。
※chrome等は正しい挙動でした。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8</head> 9<body> 10 11 <div> 12 <a href="#"><span>btn</span></a> 13 </div> 14 15 <style> 16 div { 17 border-radius: 40px; 18 overflow: hidden; 19 max-width: 330px; 20 width: 100%; 21 margin: 0 auto; 22 padding: 0; 23 } 24 div a { 25 display: block; 26 position: relative; 27 text-align: center; 28 background-color: aqua; 29 color: #000; 30 text-decoration: none; 31 padding: 17px 0px; 32 } 33 div a:before { 34 display: block; 35 content: ""; 36 position: absolute; 37 top: 50%; 38 right: 30px; 39 width: 25px; 40 height: 25px; 41 margin-top: -12px; 42 border-radius: 50%; 43 background: #fff; 44 } 45 div a:after { 46 display: block; 47 content: ""; 48 position: absolute; 49 top: 50%; 50 right: 40px; 51 width: 8px; 52 height: 8px; 53 border-top: 1px solid #000; 54 border-right: 1px solid #000; 55 transform: rotate(45deg); 56 margin-top: -3px; 57 } 58 div a span { 59 font-size: 20px; 60 font-weight: bold; 61 } 62 63 div a:hover, 64 div a:hover:before, 65 div a:hover:after { 66 -webkit-transition: 0.3s ease-in-out; 67 -moz-transition: 0.3s ease-in-out; 68 -o-transition: 0.3s ease-in-out; 69 transition: 0.3s ease-in-out; 70 } 71 div a:hover { 72 opacity: 0.7; 73 } 74 div a:hover:before { 75 right: 25px; 76 } 77 div a:hover:after { 78 right: 35px; 79 } 80 </style> 81</body> 82</html>
safariのバグだと思うのですが、調べても解決方法を見つけられませんでした。
ご教授願います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。