try disabling touch selection highlight in mobile

TeemuKoivisto · Apr 5, 2024 · 44f4654 · 44f4654
1 parent adadff0
commit 44f4654
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/packages/client/src/components/virtual-piano/VirtualPiano.svelte b/packages/client/src/components/virtual-piano/VirtualPiano.svelte
@@ -28,7 +28,7 @@
       keyCount={keys.length}
       isFirst={idx === 0}
       isLast={idx === keys.length - 1}
-      width={windowWidth}
+      {windowWidth}
       on:pressed
     />
   {/each}
@@ -41,7 +41,7 @@
       keyCount={keys.length}
       isFirst={idx === 0}
       isLast={idx === keys.length - 1}
-      width={windowWidth}
+      {windowWidth}
       on:pressed
     />
   {/each}

diff --git a/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte b/packages/client/src/components/virtual-piano/VirtualPianoKey.svelte
@@ -6,16 +6,16 @@
     keyCount: number,
     isFirst: boolean,
     isLast: boolean,
-    width: number
+    windowWidth: number
 
   let keyHeld = false
   let timeout: ReturnType<typeof setTimeout> | undefined
 
   const dispatch = createEventDispatcher<{
     pressed: number
   }>()
-  const WHITE_WIDTH = (width - 12) / 7
-  const BLACK_WIDTH = ((width - 12) / 7) * 0.75
+  const WHITE_WIDTH = (windowWidth - 12) / 7
+  const BLACK_WIDTH = ((windowWidth - 12) / 7) * 0.75
 
   $: isWhite = key.isWhite
   $: whiteCount = key.whiteKeyCount - 1
@@ -65,11 +65,7 @@
   li {
     button {
       @apply relative shadow outline-none rounded-b top-0;
-      // -webkit-tap-highlight-color: rgba(0,0,0,0);
-      &::selection {
-        color: none;
-        background: none;
-      }
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       &.is-first {
         @apply rounded-tl;
       }
@@ -110,7 +106,6 @@
         box-shadow:
           inset 0 -1px 2px rgba(255, 255, 255, 0.4),
           0 2px 3px rgba(0, 0, 0, 0.4);
-        top: 1px;
         &.is-held {
           border-bottom-width: 3px;
           background: linear-gradient(-20deg, #444, #222, #444);