# 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 がこの機能対応していますが、この機能は標準ではなく、標準化の予定もない非標準機能です。