fix(core): suppress canvas touch callouts

Author: charlieforward9

modules/core/src/lib/deck.ts

@@ -59,6 +59,16 @@ function noop() {}
 
 const getCursor = ({isDragging}) => (isDragging ? 'grabbing' : 'grab');
 
+const DEFAULT_CANVAS_STYLE = {
+  userSelect: 'none'
+} as const;
+
+const DEFAULT_CANVAS_CSS_PROPERTIES = {
+  '-webkit-user-select': 'none',
+  '-webkit-touch-callout': 'none',
+  '-webkit-tap-highlight-color': 'transparent'
+} as const;
+
 export type DeckMetrics = {
   fps: number;
   setPropsTime: number;
@@ -1041,7 +1051,10 @@ export default class Deck<ViewsT extends ViewOrViews = null> {
       parent.appendChild(canvas);
     }
 
-    Object.assign(canvas.style, props.style);
+    for (const [key, value] of Object.entries(DEFAULT_CANVAS_CSS_PROPERTIES)) {
+      canvas.style.setProperty(key, value);
+    }
+    Object.assign(canvas.style, DEFAULT_CANVAS_STYLE, props.style);
 
     return canvas;
   }

test/modules/core/lib/deck.spec.ts

@@ -131,6 +131,37 @@ test('Deck#constructor', async () => {
   console.log('Deck constructor did not throw');
 });
 
+test('Deck#auto-created canvas disables touch selection callouts', () => {
+  const parent = document.createElement('div');
+  const deck = Object.create(Deck.prototype) as {
+    _createCanvas: (props: {
+      parent?: HTMLElement;
+      id?: string;
+      width?: number;
+      height?: number;
+      canvas?: HTMLCanvasElement | string | null;
+      style?: Partial<CSSStyleDeclaration> | null;
+    }) => HTMLCanvasElement;
+  };
+
+  const canvas = deck._createCanvas({
+    parent,
+    id: 'deck-canvas-style-test',
+    width: 1,
+    height: 1,
+    canvas: null,
+    style: null
+  });
+  expect(canvas.style.userSelect, 'auto-created canvas is not selectable').toBe('none');
+
+  const styledCanvas = document.createElement('canvas');
+  deck._createCanvas({
+    canvas: styledCanvas,
+    style: {userSelect: 'text'}
+  });
+  expect(styledCanvas.style.userSelect, 'user canvas style can override defaults').toBe('text');
+});
+
 test('Deck#abort', async () => {
   const deck = new Deck({
     device,