スクロールダウンアニメーションが見えなくなる

Question

前提・実現したいこと

初めてサンプルサイトを制作しております。

メインヴィジュアル部分にCSSアニメーションでスクロールダウンの線を実装しようとしています。デザインはモバイルファーストで組んでおり、CSSも最初にスマホ用のものを書き、後からメディアクエリで大きな画面に対応させようと思っております。

そんな中、CSSの記述はGoogle Chromeのディベロッパーツールを参照しながらしているのですが、その機能で画面をiphoneX以下のサイズに変更すると、スクロールラインが見えなくなってしまい、困っています。

::beforeが動いてはいるのですが、色がないのかなんなのか……皆目検討もつかない状態です。

改善策、あるいはより良い設計がありましたら教えていただきたいです。

発生している問題

スマホ画面サイズで見るとスクロールダウンのラインアニメーションが反映されない・見えない。

該当のソースコード

<div class="scrollLine">
    <span class="-border"></span>
    <span class="-txt">SCROLL</span>
</div>

.scrollLine {
    display: flex;
    align-items: center;
    transform: rotate(270deg);
    transform-origin: left;
    width: 150px;
    position: absolute;
    bottom: 12%;
    left: 5%;
}
.-border {
    width: 100px;
    height: 1px;
    overflow: hidden;
}
.-border::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: #000;
    animation: scrollLine 2.1s ease-in-out infinite;
    z-index: 9000;
}
.-txt {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-left: 9px;
}

/* アニメーション設定 */
@keyframes scrollLine {
    0% {
        transform: translateX(100%);
    }

    30% {
        transform: translateX(0%);
    }

    70% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 特に関係なさそうな部分 */
html, body {
    width: 100%;
    height: 100%;
}

試したこと

・::before要素の色を変えてみる
・-borderクラスに{position: relative;}を、::before要素に{position: absolute; top: 0; left: 0;}を追加してみる
・ディベロッパーツールで画面をipadサイズやpcサイズに変更してみる→これならアニメーションが見える

補足情報（FW/ツールのバージョンなど）

＊destyle.cssを適応しています
＊実際にはSCSSを使用してcssファイルを作成しています
＊Visual Studio Codeを使用

Answer 1

1pxが表示出来ていないんだと思います。
.-borderのheightを2pxもしくはそれ以上にしてみてください。

.-border {
    width: 100px;
-   height: 1px;
+   height: 2px;
    overflow: hidden;
}

ただ、おそらく実機では1pxでも表示されます。

Answer 2

環境にもよると思いますが、height: 1px;を1.1pxにするとおおむねよさそうな感じでした。

おそらく、変形によるサブピクセルの問題なのではないかな、と思いました。