目次
目次

バグ報告Ver.2.14.0→2.14.1

リリースメモ
この記事は約24分で読めます。
記事内に広告が含まれています。
目次

【件名】横並び表示にした際 カードのが一瞬縦向きになるチラつきを改善

【現象】

横並び表示にした際、Swiperの読み込み待ちによる、カードの一瞬の縦並びとなる。
また、スライダー初期化の前後で、カード間の余白(0px → 30px)が変化しチラつく。

【原因】

横並びの制御をSwiperに依存しているため、初期化が終わるまでブラウザ標準の「縦並び」になってしまう。

【対策】

スキンのCSSで、横並び表示のときカードを横並びへの設定する。
JS実行前でも、CSS側で30pxの余白を確保するように修正する。
以下を追加する。

.swiper {
  overflow: hidden;
  position: relative;
}

.swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: var(--gap30);
}

.swiper.swiper-initialized .swiper-wrapper {
  gap: 0;
}

.swiper:not(.swiper-initialized) .swiper-button-prev {
  opacity: 0.35;
}

変更一覧

パスファイル名
/skin-made-in-heaven/style.css
タイトルとURLをコピーしました