カルーセルの自動スライドでHA-PACSがスキップされる

[shuuji3]

HA-PACSの1つ手前のHA-PACS/TCAまで来ると、1枚目のPegasusに戻ってしまいます。

[namachan10777]

これ私の環境だと再現しませんでした。ブラウザ等の情報をいただきたいです

[shuuji3]

改めてテストしてみたところ、Linux (Pop_OS!) のGoogle Chromeでだけ発生する問題だとわかりました (Firefoxや、macOSのGoogle Chrome、Firefoxでは問題なし)。

おそらくこの環境でだけ右側に幅のあるスライダーが常時表示されるので、幅の計算がずれているのだと思います。

[shuuji3]

幅の計算で window.innerWidth が使われているのが原因かもしれません。

https://github.com/tsukuba-hpcs/hpcs-web/blob/479ba70672b7af9ec0ee14c7ed0aaea706207dec/src/components/display/Carousel.astro#L135

The read-only Window property innerWidth returns the interior width of the window in pixels (that is, the width of the window's layout viewport). That includes the width of the vertical scroll bar, if one is present.

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

[namachan10777]

なるほど、ありがとうございます 🙇 下記Issueと合わせて修正します

• safariでcarouselが壊れている #41

[shuuji3]

@namachan10777 すみません、今コメントを見ました。

scroll()ではなく、画像の幅が100vwの場合にスクロールバー分(15px)だけ幅が広くなってしまうことが原因だったので、#42のように100%にすると問題が起こらなくなりました。もし別の方法があればcloseしても構いません。

[shuuji3]

ref. New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem — Smashing Magazine - https://www.smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem/