ページリロード時に一瞬映るチェックマーク

[Ba98]

お世話になります。
現在２つのストアを改修しておりますが、表題の現象に悩んでおります。
ページをリロードした際に、チェックマークの画像が一瞬、画面いっぱいに表示されます。

２つのストアも同じ現象が起きており、2つのストアに共通している項目は、
Dawnテーマを使用、ページTOPにスライダーを使用、アプリにInstafeedを使用していることです。
スライダーとInstafeedを非表示にしてみても変わりませんでした。
何か対策方法はあるでしょうか。

[株式会社フルバランス]

Ba98さま

フルバランスの園畑です。
ご質問を確認いたしました。

チェックマークがどのセクションにある要素なのか把握できていないため、詳しいことは言えませんが、cssとjavascriptの読み込みの差があるため、一瞬表示崩れが起きるのかと思います。

一例ですが、表示崩れが起こる要素を特定し、以下サイトの方法を試してみてはいかがでしょうか？

https://xia-inc.com/2018/01/31/3301/

ご参考までに。
 
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
 
分からない点があれば、またいつでもご連絡ください。
 
フルバランス　園畑

[Ba98]

園畑様
ご返信ありがとうございます。
こちら、カートに商品が追加されましたの頭に表示されるチェックマークであることが判明しました。
添付のURLを参考に、

theme.liquid内に下記コードを記載しました。

.cart-notification__heading .icon-checkmark{
display:none;
}

<script type="text/javascript">
$(window).load(function() {
$('#drawer-navigation').fadeIn(0);
});
</script>

カート追加時に表示されなくなりましたが、リロード時にもチェックマークが画面いっぱいに一瞬表示されなくなりました。
しかし、スペシャルリロード時には一瞬表示されます。
カスタマイズもほぼ行っていないのですが、これは仕様なのでしょうか。

[Jizo_Inagaki]

問題が再現できないので推測になりますが、対象の画像タグ(おそらくsvg)に対して、viewBoxのサイズと同じ値でwidth属性とheight属性を記述すれば、少なくとも大きく表示されることはないのではと思われます。

なお、試されたコードはJS側のセレクタ指定が変更されていないので効果がありません(=CSSで消したままになる)。

以上ですが、難しい場合はエキスパートやパートナーに依頼されることをお勧めします。