#safari でボタンタップしたら影が残る怪奇現象

chrome と最新の safari なら問題ありませんが、バージョンの古い safari でボタンしたら影が残る現象があったので、調べて見ました。

環境

  • ipad
  • safari
  • CSS フレームワークなし
  • リセット CSS なし

#各ブラウザーのデフォルトスタイルシート CSS

safari だけでなく、chrome Firefox Edge などのブラウザがデフォルトでスタイルシート設定あります。ユーザーから特に指定がない場合、デフォルト設定のスタイルでレンダリングします。

Chrome user agent stylesheet(opens new window)
Safari user agent stylesheet(opens new window)
Firefox user agent stylesheet(opens new window)
Edge user agent stylesheet(opens new window)

#最新 Chrome の button デフォルト設定

body {
  display: block;
  margin: 8px;
}
body:-webkit-full-page-media {
  background-color: rgb(0, 0, 0);
}
button {
  -webkit-appearance: button;
}
input,
textarea,
keygen,
select,
button {
  margin: 0__qem;
  font: -webkit-small-control;
  text-rendering: auto; /* FIXME: Remove when tabs work with optimizeLegibility. */
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}

#最新 safari の button デフォルト設定

button {
  -webkit-appearance: button;
}

/* Form controls don't go vertical. */
input,
textarea,
keygen,
select,
button,
meter,
progress {
  -webkit-writing-mode: horizontal-tb !important;
}

input,
textarea,
keygen,
select,
button {
  margin: 0__qem;
  #if !(defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY) font: -webkit-small-control;
  #endif color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}

#最新 Edge の button デフォルト設定

button {
  background-color: #f0f0f0;
  background-image: linear-gradient(#ececec, #d5d5d5);
  background-origin: border-box;
  border: 2px solid #707070;
  box-sizing: border-box;
  color: #212121;
  display: inline-block;
  font-family: "Arial";
  height: 6px;
  padding: 1px 6px;
  text-align: center;
  webkit-appearance: button;
  webkit-background-origin: border-box;
  width: 16px;
}

#原因と解決方法

原因は safari のデフォルトスタイルシートにあるようで、html タグに-webkit-tap-highlight-color: transparent;追加書けば、問題解消!


 


html {
  -webkit-tap-highlight-color: transparent; // 透明設定で強調なくす
}

-webkit-tap-highlight-color とは

ユーザーがタップしたことを認識されていることを示しためのタグで、リンクがタップされている間に強調表示の設定。

WebKit/Safari Blink/Chrome と一部のバージョンの Internet Explorer と Microsoft Edge がこの機能対応していますが、この機能は標準ではなく、標準化の予定もない非標準機能です。

2021-01-05
  • css