Remove rectangle shaped background color when tapping buttons in iOS …

…Safari
peruukki · Dec 29, 2024 · 1504431 · 1504431
1 parent 802b96f
commit 1504431
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/app/src/main.scss b/app/src/main.scss
@@ -2,6 +2,7 @@
 @use 'styles/vendor/normalize';
 
 // Base
+@use 'styles/normalize-custom';
 @use 'styles/animations';
 @use 'styles/colors';
 @use 'styles/sizes';

diff --git a/app/src/styles/normalize-custom.css b/app/src/styles/normalize-custom.css
@@ -0,0 +1,10 @@
+/**
+ * Remove rectangle shaped background color when tapping in iOS Safari.
+ *
+ * See:
+ * - https://goulet.dev/posts/fix-css-tap-effects-on-ios/
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
+ */
+button {
+  -webkit-tap-highlight-color: transparent;
+}