お世話になります。
現在２つのストアを改修しておりますが、表題の現象に悩んでおります。
ページをリロードした際に、チェックマークの画像が一瞬、画面いっぱいに表示されます。
２つのストアも同じ現象が起きており、2つのストアに共通している項目は、
Dawnテーマを使用、ページTOPにスライダーを使用、アプリにInstafeedを使用していることです。
スライダーとInstafeedを非表示にしてみても変わりませんでした。
何か対策方法はあるでしょうか。
Topic summary
ページリロード時にチェックマークの画像が一瞬画面いっぱいに表示される問題が発生。
問題の詳細:
- 2つのストアで同じ現象が発生
- カートに商品追加時のチェックマークが原因と判明
- TOPページでスライダー、アプリでInstafeed、Dawnテーマを使用
試した対策:
- CSSで
display:noneを設定したところ、カート追加時の表示は消えたが、リロード時とスペシャルリロード時に一瞬表示される問題は残存 - jQueryでフェードイン処理も追加したが、タイミングがほぼ同じで効果なし
提案された解決策:
- CSSとJavaScriptの読み込みタイミングの差が原因の可能性
- SVGタグに対してviewBoxと同じ値でwidth/height属性を記述することで、大きく表示されることを防げる可能性
- 難しい場合はエキスパートやパートナーへの依頼を推奨
現在も解決には至っていない状況。
Ba98さま
フルバランスの園畑です。
ご質問を確認いたしました。
チェックマークがどのセクションにある要素なのか把握できていないため、詳しいことは言えませんが、cssとjavascriptの読み込みの差があるため、一瞬表示崩れが起きるのかと思います。
一例ですが、表示崩れが起こる要素を特定し、以下サイトの方法を試してみてはいかがでしょうか？
https://xia-inc.com/2018/01/31/3301/
ご参考までに。
私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 園畑
園畑様
ご返信ありがとうございます。
こちら、カートに商品が追加されましたの頭に表示されるチェックマークであることが判明しました。
添付のURLを参考に、
theme.liquid内に下記コードを記載しました。
.cart-notification__heading .icon-checkmark{
display:none;
}
カート追加時に表示されなくなりましたが、リロード時にもチェックマークが画面いっぱいに一瞬表示されなくなりました。
しかし、スペシャルリロード時には一瞬表示されます。
カスタマイズもほぼ行っていないのですが、これは仕様なのでしょうか。
問題が再現できないので推測になりますが、対象の画像タグ(おそらくsvg)に対して、viewBoxのサイズと同じ値でwidth属性とheight属性を記述すれば、少なくとも大きく表示されることはないのではと思われます。
なお、試されたコードはJS側のセレクタ指定が変更されていないので効果がありません(=CSSで消したままになる)。
以上ですが、難しい場合はエキスパートやパートナーに依頼されることをお勧めします。