Swiperでカルーセルを実装して矢印連打するとSafariで範囲選択される事象

発生したこと

Swiperを用いて以下のようなカルーセルを実装しました。

See the Pen SwiperTest by heeroo-ymsw (@heeroo-ymsw) on CodePen.

公式のDemoのSlides per viewに、矢印を足して、ページネーションを除いたものになります。

これをSafariで開き、右矢印をクリックしスライドアニメーション中にもう一度右矢印をクリックする（ダブルクリックする）と以下のようにSwiperのコンテナが範囲選択状態になることが分かると思います。

発動条件が一応あり、下に要素が続く場合のみ発生するようです。

この事象が発生した環境

• Safari 14.1.1 (16611.2.7.1.4)
• Swiper v8.0.3

対策

範囲選択されなければいいので、CSSで範囲選択されるコンテナに対して**user-selectをnoneに設定**します。
ただし、Safariでuser-selectを有効にするには、ベンダープレフィックスを付与する必要があります。
その他IEや古いバージョンのFirefoxなどベンダープレフィックスが必要ですので、以下のように記載します。

.swiper {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

また、.swiper内にテキストなどの範囲選択できるようにしたい部分があれば、その部分に対してuser-selectの設定を上書きすればその範囲のみ選択できるように設定できます。

allはIE非対応、Safariは挙動が異なるため、textと明示します。

.swiper-slide-text {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

user-selectについて

ユーザがテキストを範囲選択できるかどうかを制御します。

none

対象の要素とその子孫要素のテキストは範囲選択できなくなります。

text

テキストを選択できます。

contain

要素の内部で選択を始めることができます。

auto

下記のように決められます。

• 擬似要素::beforeと::afterでは、値はnone
• 編集可能な要素の場合、値はcontain
• 上記以外で、親要素のuser-selectの値がallの場合、対象要素の使用値もall
• 上記以外で、親要素のuser-selectの値がnoneの場合、対象要素の使用値もnone
• 上記以外の場合、使用値はtext

all

1回クリックすると範囲選択されるようになります。
選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれます。
子孫要素でダブルクリックや右クリックを行うと、この値が設定されている要素の先祖要素の最上位要素が範囲選択されます。