safariでの擬似要素とtransformの意図しない挙動

ページトップに戻るボタンをhtmlとcssで制作しているのですが、safariでページを表示した際にのみ、擬似要素とtransformに意図しない挙動が発生してしまいます。
divをフッターの部分にposition:absoluteで配置しており、ホバーするとtransitionで少し上に浮くアニメーションをつけているのですが、safariでページを表示した際に、擬似要素の矢印のborder-topの部分が表示されていない（擬似要素のwidthが反映されていない？）状態で表示されてしまい、ホバーすると、矢印が正しく表示されて全体が左に寄ってから、上に浮くアニメーションが発火するような状態になっています。
ページが表示されてから一度ホバーするとその後は正常な状態で表示され、transitionも正しく動きます（更新するとまた最初の表示に戻ってしまいます）
chromeなど他のブラウザでは最初から正常に表示されています。
原因がつかめず詰まっております。。お力添えいただけると助かります、よろしくお願いいたします。

html
1<footer>
2  <div id="page-top">
3    <a href="#">PAGETOP</a>
4  </div>
5</footer>

scss
1footer{
2  background: #ff5c6d;
3  color: white;
4  padding: 20% 5% 2% 25%;
5  position: relative;
6}
7
8#page-top{
9  cursor: pointer;
10  display: flex;
11  align-items: flex-end;
12  right: 30px;
13  transition-duration: 0.5s;
14  transition-property: transform;
15  position: absolute;
16  top: 12px;
17  &:hover{
18    transform: translate(0, -10px);
19  }
20  a{
21    writing-mode: vertical-lr;
22    font-weight: bold;
23    color: white;
24    text-decoration: none;
25  }
26  &::before{
27    content: "";
28    width: 8px;
29    height: 94px;
30    border-top: 1px solid white;
31    border-left: 1px solid white;
32    transform: skew(0deg, 45deg);
33  }
34}