＜CSS＞疑似要素にtransitionがかかっているとブラウザバッグでスタイルが崩れる可能性がある #HTML5

発生したブラウザ: chrome
対象: CSS3の疑似要素

課題

PC

style.css

.pageContent.top .secondaryBlock__btnList li:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-out;
    z-index: 1;
}
.elem:hover:after {
    transform: scale(1.15);
}
.elem:nth-child(1):after {
    background: url("img-pc.png") no-repeat center center/contain;
}

SP

style.css

/* ========================================
            styles for tablet & SP
======================================== */
@media screen and (max-width: 768px) {
.elem:after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    z-index: 3;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    pointer-events: none;
}
.elem:hover:after {
    transform: scale(1) translateY(-50%)
}
.elem:nth-child(1):after {
    background-image: url("img-sp.jpg");
}
}

PCのときはhoverのときtransitionでエフェクトを付けていましたが、SP時はhover時の動きはありません。

読み込み時はスタイル崩れはありませんでした。

しかし!!!

ブラウザバッグをするとPCの背景画像とスタイルになっているのです。
SPの画像は確かに読み込まれているし、スタイルも認識しているのになぜ?

デベロッパーツールでなにか1つプロパティに変更をかける(チェックを外したり数値を変えたりする)と、SP用スタイルに切り替わる不思議減少。。。

20分くらい悩みました。。

解決策

SP

style.css

/* ========================================
            styles for tablet & SP
======================================== */
@media screen and (max-width: 768px) {
.elem:after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    z-index: 3;
    top: 50%;
    left: 0;
    transition: none; // 追加しました
    transform: translateY(-50%);
    pointer-events: none;
}
.elem:hover:after {
    transform: scale(1) translateY(-50%)
}
.elem:nth-child(1):after {
    background-image: url("img-sp.jpg");
}
}

答えは単純transition: none;をSPのスタイルに追加するだけです。

hover用のアニメーションをちゃんと切ってあげるだけ。

こんなバグもあるんだなあ。と、しみじみしました。