fix adjacent visibility (#3835)

* fix adjacent visibility

* added comment

Author: elalish

packages/model-viewer/src/model-viewer-base.ts

@@ -304,7 +304,10 @@ export default class ModelViewerElementBase extends ReactiveElement {
         // model above the fold, but only when the animated model was completely
         // below. Setting this margin to zero fixed it.
         rootMargin: '0px',
-        threshold: 0,
+        // With zero threshold, an element adjacent to but not intersecting the
+        // viewport will be reported as intersecting, which will cause
+        // unnecessary rendering. Any slight positive threshold alleviates this.
+        threshold: 0.00001,
       });
     } else {
       // If there is no intersection observer, then all models should be visible

packages/model-viewer/src/test/features/loading-spec.ts

@@ -26,10 +26,12 @@ const HORSE_GLB_PATH = assetPath('models/Horse.glb');
 
 suite('Loading', () => {
   let element: ModelViewerElement;
+  let firstChild: ChildNode|null;
 
   setup(async () => {
     element = new ModelViewerElement();
-    document.body.insertBefore(element, document.body.firstChild);
+    firstChild = document.body.firstChild;
+    document.body.insertBefore(element, firstChild);
     element.poster = assetPath('../screenshot.png');
 
     // Wait at least a microtask for size calculations
@@ -44,6 +46,57 @@ suite('Loading', () => {
     }
   });
 
+  suite('with a second element outside the viewport', () => {
+    let element2: ModelViewerElement;
+
+    setup(async () => {
+      element2 = new ModelViewerElement();
+      element2.loading = 'eager';
+      document.body.insertBefore(element2, firstChild);
+      element.style.height = '100vh';
+      element2.style.height = '100vh';
+      const load1 = waitForEvent(element, 'load');
+      const load2 = waitForEvent(element2, 'load');
+      element.src = CUBE_GLB_PATH;
+      element2.src = CUBE_GLB_PATH;
+      await Promise.all([load1, load2]);
+    });
+
+    teardown(() => {
+      if (element2.parentNode != null) {
+        element2.parentNode.removeChild(element2);
+      }
+    });
+
+    test('first element is visible', () => {
+      expect(element.modelIsVisible).to.be.true;
+    });
+
+    test('second element is not visible', () => {
+      expect(element2.modelIsVisible).to.be.false;
+    });
+
+    suite('scroll to second element', () => {
+      setup(() => {
+        element2.scrollIntoView();
+      });
+
+      test('first element is not visible', async () => {
+        await waitForEvent<CustomEvent>(
+            element,
+            'model-visibility',
+            event => event.detail.visible === false);
+      });
+
+      test('second element is visible', async () => {
+        await waitForEvent<CustomEvent>(
+            element2,
+            'model-visibility',
+            event => event.detail.visible === true);
+      });
+    });
+  });
+
   test('creates a poster element that captures interactions', async () => {
     const picked = pickShadowDescendant(element);
     expect(picked).to.be.ok;