transitionを使用してホバーアニメーションボタンを作りたい。

前提・実現したいこと

transitionを使用して、ホバーアニメーションのあるボタンを作っています。

発生している問題・エラーメッセージ

作ることはできたのですが、Macのsafari バージョン12.0（13606.2.11）で確認すると、
ホバーした際に一瞬overflow: hidden;が無効になったような挙動になります。
※chrome等は正しい挙動でした。

該当のソースコード

http://134978.playcode.io/

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件

自己解決

自己解決しました。
親要素にz-indexとposition:relativeで治りました。

https://qiita.com/chieeeeno/items/83ee1c80ddfd0ff35bb8

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      /* ------------------------- 追加 ------------------------- */
25      z-index:1;
26      position:relative;
27    }
28    div a {
29      display: block;
30      position: relative;
31      text-align: center;
32      background-color: aqua;
33      color: #000;
34      text-decoration: none;
35      padding: 17px 0px;
36    }
37    div a:before {
38      display: block;
39      content: "";
40      position: absolute;
41      top: 50%;
42      right: 30px;
43      width: 25px;
44      height: 25px;
45      margin-top: -12px;
46      border-radius: 50%;
47      background: #fff;
48    }
49    div a:after {
50      display: block;
51      content: "";
52      position: absolute;
53      top: 50%;
54      right: 40px;
55      width: 8px;
56      height: 8px;
57      border-top: 1px solid #000;
58      border-right: 1px solid #000;
59      transform: rotate(45deg);
60      margin-top: -3px;
61    }
62    div a span {
63      font-size: 20px;
64      font-weight: bold;
65    }
66
67    div a:hover,
68    div a:hover:before,
69    div a:hover:after {
70      -webkit-transition: 0.3s ease-in-out;
71      -moz-transition: 0.3s ease-in-out;
72      -o-transition: 0.3s ease-in-out;
73      transition: 0.3s ease-in-out;
74    }
75    div a:hover {
76      opacity: 0.7;
77    }
78    div a:hover:before {
79      right: 25px;
80    }
81    div a:hover:after {
82      right: 35px;
83    }
84  </style>
85</body>
86</html>