Browse Source

fix: remove will-change that it causes blurry

Peng Xiao 3 years ago
parent
commit
eb3c96dd90

+ 0 - 1
tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -123,7 +123,6 @@ export function usePaste(context: LogseqContextValue) {
         try {
           const data = JSON.parse(rawText)
           if (data.type === 'logseq/whiteboard-shapes') {
-            debugger
             const shapes = data.shapes as TLShapeModel[]
             const commonBounds = BoundsUtils.getCommonBounds(
               shapes.map(shape => ({

+ 2 - 1
tldraw/apps/tldraw-logseq/src/styles.css

@@ -10,6 +10,8 @@
   --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  backface-visibility: hidden;
 }
 
 .logseq-tldraw-wrapper {
@@ -112,7 +114,6 @@
   white-space: nowrap;
   gap: 12px;
   align-items: stretch;
-  will-change: transform, contents;
   box-shadow: var(--shadow-medium);
   z-index: 1000;
 

+ 1 - 1
tldraw/packages/react/src/components/HTMLLayer/HTMLLayer.tsx

@@ -21,7 +21,7 @@ export const HTMLLayer = observer(function HTMLLayer({ children }: HTMLLayerProp
         const { zoom, point } = viewport.camera
         layer.style.setProperty(
           'transform',
-          `scale(${zoom}) translate(${point[0]}px, ${point[1]}px)`
+          `scale(${zoom}) translate3d(${point[0]}px, ${point[1]}px, 0)`
         )
       }),
     []

+ 0 - 2
tldraw/packages/react/src/hooks/useStylesheet.ts

@@ -119,7 +119,6 @@ const tlcss = css`
     cursor: var(--tl-cursor) !important;
     box-sizing: border-box;
     color: var(--tl-foreground);
-    will-change: transform;
   }
 
   .tl-overlay {
@@ -167,7 +166,6 @@ const tlcss = css`
     left: 0px;
     transform-origin: center center;
     contain: layout style size;
-    will-change: transform;
   }
 
   .tl-positioned {