縦文字がsafariのブラウザの時にずれてしまうので解決したいです！

・iphoneでの写り

・GoogleChromeでの写り

◎実現したいこと

縦文字のscrollを実装すると、文字だけがずれてしまい、真ん中にきません。
「scroll」の文字を白の棒線と同じように真ん中に来るように実装したいです。

GoogleChrome、edgeではしっかりscrollの文字が真ん中に表示されていますが、iphoneのブラウザでみると写真のようにずれてしまう状況です。

◎試したこと

こちらの記事を参考にして

letter-spacing: normal;

を試しましたが、うまくいきませんでした。

◎コード

・HTML

<div class="first-v">
            <div class="first-v__scroll">
                <a href="#profile">
                    scroll
                </a>
            </div>
        </div>

・CSS

.first-v {
    background: url(../image/first-v/S__25870342_0.jpg);
    height: calc(100vh - 138px);
    background-size: cover;
    background-position: center;
    .first-v__scroll {
        position: absolute;
        top: 70%;
        right: 5%;
        @include sp {
            right: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        a {
            display: block;
            letter-spacing: normal;
            font-size: 1.8rem;
            color: #3f3b3a;
            writing-mode: vertical-lr;
            margin: 0 auto;
            @include sp {
                color: #fff;
            }
            &::before {
                content: "";
                display: block;
                position: absolute;
                top: 70px;
                right: 0;
                left: 0;
                margin: 0 auto;
                width: 1px;
                height: 100px;
                background-color: #3f3b3a;
                animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
                @include sp {
                    background-color: #fff;
                }
            }
        }
    }
}

// scrollアニメーション
@keyframes sdl {
    0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
    }
    50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
    }
    50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
    }
    100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
    }
}