Fix the issue that element sometimes get placed incorrectly

Fixes: #14
huww98 · Dec 7, 2020 · 45b5bc1 · 45b5bc1
1 parent 1f3c514
commit 45b5bc1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/canvasLayer.ts b/src/canvasLayer.ts
@@ -21,9 +21,10 @@ export class CanvasLayer {
 
     constructor(el: HTMLElement, private options: ResolvedRenderOptions, model: RenderModel) {
         const canvas = document.createElement('canvas');
-        canvas.style.width = '100%';
-        canvas.style.height = '100%';
-        canvas.style.position = 'absolute';
+        const style = canvas.style;
+        style.position = 'absolute';
+        style.width = style.height = '100%';
+        style.left = style.right = style.top = style.bottom = '0';
         el.shadowRoot!.appendChild(canvas);
 
         this.gl = getContext(canvas, options.forceWebGL1);

diff --git a/src/svgLayer.ts b/src/svgLayer.ts
@@ -6,9 +6,10 @@ export class SVGLayer {
 
     constructor(el: HTMLElement, model: RenderModel) {
         this.svgNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        this.svgNode.style.position = 'absolute';
-        this.svgNode.style.width = '100%';
-        this.svgNode.style.height = '100%';
+        const style = this.svgNode.style;
+        style.position = 'absolute';
+        style.width = style.height = '100%';
+        style.left = style.right = style.top = style.bottom = '0';
         el.shadowRoot!.appendChild(this.svgNode);
 
         model.disposing.on(() => {