Fixed iOS related display issues (#570)

added polyfill for intersectionobserver and handle dominant-baseline correctly.
CoderLine · Apr 2, 2021 · 657f884 · 657f884
1 parent bdaaf95
commit 657f884
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 3 deletions.
diff --git a/src/Environment.ts b/src/Environment.ts
@@ -55,6 +55,7 @@ import { LeftHandTapEffectInfo } from './rendering/effects/LeftHandTapEffectInfo
 import { CapellaImporter } from './importer/CapellaImporter';
 import { ResizeObserverPolyfill } from './platform/javascript/ResizeObserverPolyfill';
 import { WebPlatform } from './platform/javascript/WebPlatform';
+import { IntersectionObserverPolyfill } from './platform/javascript/IntersectionObserverPolyfill';
 
 export class LayoutEngineFactory {
     public readonly vertical: boolean;
@@ -125,6 +126,9 @@ export class Environment {
                 vertical-align: top;
                 overflow: visible;
             }
+            .at-surface-svg text {
+                dominant-baseline: central;
+            }             
             .at {
                  font-family: 'alphaTab';
                  speak: none;
@@ -466,8 +470,13 @@ export class Environment {
             Environment.HighDpiFactor = window.devicePixelRatio;
             // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
             // so we better add a polyfill for it
-            if (!('ResizeObserver' in globalThis)) {
-                (globalThis as any).ResizeObserver = ResizeObserverPolyfill;
+            if (!('ResizeObserver' in Environment.globalThis)) {
+                (Environment.globalThis as any).ResizeObserver = ResizeObserverPolyfill;
+            }
+            // IntersectionObserver API does not on older iOS versions
+            // so we better add a polyfill for it
+            if (!('IntersectionObserver' in Environment.globalThis)) {
+                (Environment.globalThis as any).IntersectionObserver = IntersectionObserverPolyfill;
             }
         }
     }

diff --git a/src/platform/javascript/IntersectionObserverPolyfill.ts b/src/platform/javascript/IntersectionObserverPolyfill.ts
@@ -0,0 +1,64 @@
+/**
+ * A polyfill of the InsersectionObserver
+ * @target web
+ */
+export class IntersectionObserverPolyfill {
+    private _callback: IntersectionObserverCallback;
+    private _elements: HTMLElement[] = [];
+
+    public constructor(callback: IntersectionObserverCallback) {
+        let timer: any = null;
+        const oldCheck = this._check.bind(this);
+        this._check = () => {
+            if (!timer) {
+                timer = setTimeout(() => {
+                    oldCheck();
+                    timer = null;
+                }, 100);
+            }
+        };
+
+        this._callback = callback;
+
+        window.addEventListener('resize', this._check, true);
+        document.addEventListener('scroll', this._check, true);
+    }
+
+    public observe(target: HTMLElement) {
+        if (this._elements.indexOf(target) >= 0) {
+            return;
+        }
+        this._elements.push(target);
+        this._check();
+    }
+
+    public unobserve(target: HTMLElement) {
+        this._elements = this._elements.filter(item => {
+            return item != target;
+        });
+    };
+
+    private _check() {
+        const entries: IntersectionObserverEntry[] = [];
+        this._elements.forEach(element => {
+            const rect = element.getBoundingClientRect();
+            const isVisible = (
+                rect.top + rect.height >= 0 &&
+                rect.top <= window.innerHeight &&
+                rect.left + rect.width >= 0 &&
+                rect.left <= window.innerWidth
+            );
+
+            if (isVisible) {
+                entries.push({
+                    target: element,
+                    isIntersecting: true
+                } as any);
+            }
+        });
+
+        if (entries.length) {
+            this._callback(entries, this as any);
+        }
+    }
+}
diff --git a/src/platform/svg/SvgCanvas.ts b/src/platform/svg/SvgCanvas.ts
@@ -23,7 +23,7 @@ export abstract class SvgCanvas implements ICanvas {
 
     public beginRender(width: number, height: number): void {
         this.buffer = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="${width | 0}px" height="${height | 0
-            }px" class="at-surface-svg" style="dominant-baseline: central;">\n`;
+            }px" class="at-surface-svg">\n`;
         this._currentPath = '';
         this._currentPathIsEmpty = true;
         this.textBaseline = TextBaseline.Top;