fix: safari (#209)

* update the docs

* fix: safari

* allow a few more bytes

* allow even more bytes

Author: stipsan

package.json

@@ -84,11 +84,11 @@
   "bundlesize": [
     {
       "path": "./umd/scroll-into-view-if-needed.min.js",
-      "maxSize": "1.5 kB"
+      "maxSize": "1.75 kB"
     },
     {
       "path": "./umd/scroll-into-view-if-needed.js",
-      "maxSize": "2.3 kB"
+      "maxSize": "3 kB"
     }
   ],
   "lint-staged": {

src/compute.ts

@@ -226,12 +226,15 @@ export const compute = (
   }
 
   // Workaround Chrome's behavior on clientHeight/clientWidth after introducing visualViewport
+  // https://www.quirksmode.org/blog/archives/2016/02/chrome_change_b.html
   const viewportWidth = window.visualViewport
     ? window.visualViewport.width
     : viewport.clientWidth
   const viewportHeight = window.visualViewport
     ? window.visualViewport.height
     : viewport.clientHeight
+  const viewportX = window.scrollX || window.pageXOffset
+  const viewportY = window.scrollY || window.pageYOffset
 
   // If the element is already visible we can end it here
   if (scrollMode === 'if-needed') {
@@ -284,7 +287,7 @@ export const compute = (
         targetBlock = targetRect.top
       }
       if (viewport === frame) {
-        blockScroll = frame.scrollTop + targetBlock
+        blockScroll = viewportY + targetBlock
       } else {
         // prevent scrollTop values that overflow the scrollHeight
         const offset = Math.min(
@@ -301,7 +304,7 @@ export const compute = (
         targetBlock = targetRect.top + targetRect.height / 2
       }
       if (viewport === frame) {
-        blockScroll = frame.scrollTop + targetBlock - frame.clientHeight / 2
+        blockScroll = viewportY + targetBlock - frame.clientHeight / 2
       } else {
         // prevent negative scrollTop values
         const offset =
@@ -323,7 +326,7 @@ export const compute = (
         targetBlock = targetRect.bottom
       }
       if (viewport === frame) {
-        blockScroll = frame.scrollTop + targetBlock - frame.clientHeight
+        blockScroll = viewportY + targetBlock - frame.clientHeight
       } else {
         // prevent negative scrollTop values
         const offset =
@@ -343,15 +346,15 @@ export const compute = (
 
       if (viewport === frame) {
         const offset = alignNearest(
-          frame.scrollTop,
-          frame.scrollTop + viewportHeight,
+          viewportY,
+          viewportY + viewportHeight,
           viewportHeight,
-          frame.scrollTop + targetBlock,
-          frame.scrollTop + targetBlock + targetRect.height,
+          viewportY + targetBlock,
+          viewportY + targetBlock + targetRect.height,
           targetRect.height
         )
 
-        blockScroll = frame.scrollTop + offset
+        blockScroll = viewportY + offset
       } else {
         const offset = alignNearest(
           frameRect.top,
@@ -373,7 +376,7 @@ export const compute = (
         targetInline = targetRect.left
       }
       if (viewport === frame) {
-        inlineScroll = frame.scrollLeft + targetInline
+        inlineScroll = viewportX + targetInline
       } else {
         // prevent scrollLeft values that overflow the scrollLeft
         const offset = Math.min(
@@ -391,7 +394,7 @@ export const compute = (
         targetInline = targetRect.left + targetRect.width / 2
       }
       if (viewport === frame) {
-        inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth / 2
+        inlineScroll = viewportX + targetInline - frame.clientWidth / 2
       } else {
         // prevent negative scrollLeft values
         const offset =
@@ -413,7 +416,7 @@ export const compute = (
         targetInline = targetRect.right
       }
       if (viewport === frame) {
-        inlineScroll = frame.scrollLeft + targetInline - frame.clientWidth
+        inlineScroll = viewportX + targetInline - frame.clientWidth
       } else {
         // prevent negative scrollLeft values
         const offset =
@@ -433,15 +436,15 @@ export const compute = (
 
       if (viewport === frame) {
         const offset = alignNearest(
-          frame.scrollLeft,
-          frame.scrollLeft + viewportWidth,
+          viewportX,
+          viewportX + viewportWidth,
           viewportWidth,
-          frame.scrollLeft + targetInline,
-          frame.scrollLeft + targetInline + targetRect.width,
+          viewportX + targetInline,
+          viewportX + targetInline + targetRect.width,
           targetRect.width
         )
 
-        inlineScroll = frame.scrollLeft + offset
+        inlineScroll = viewportX + offset
       } else {
         const offset = alignNearest(
           frameRect.left,

src/index.ts

@@ -8,12 +8,20 @@ export interface Options {
   inline?: ComputeOptions['inline']
 }
 
+// Wait with checking if native smooth-scrolling exists until scrolling is invoked
+// This is much more friendly to server side rendering envs, and testing envs like jest
+let supportsScrollBehavior
+
 // Some people might use both "auto" and "ponyfill" modes in the same file, so we also provide a named export so
 // that imports in userland code (like if they use native smooth scrolling on some browsers, and the ponyfill for everything else)
 // the named export allows this `import {auto as autoScrollIntoView, ponyfill as smoothScrollIntoView} from ...`
 export default (target: Element, maybeOptions: Options | boolean = true) => {
   let options: Options = {}
 
+  if (supportsScrollBehavior === undefined) {
+    supportsScrollBehavior = 'scrollBehavior' in document.documentElement.style
+  }
+
   // Handle alignToTop for legacy reasons
   if (maybeOptions === true || maybeOptions === null) {
     options = { block: 'start', inline: 'nearest' }
@@ -36,11 +44,16 @@ export default (target: Element, maybeOptions: Options | boolean = true) => {
 
   instructions.forEach(({ el, top, left }) => {
     // browser implements the new Element.prototype.scroll API that supports `behavior`
-    if (el.scroll) {
+    // and guard window.scroll with supportsScrollBehavior
+    if (el.scroll && supportsScrollBehavior) {
       el.scroll({ top, left, behavior })
     } else {
-      el.scrollTop = top
-      el.scrollLeft = left
+      if (el === document.documentElement) {
+        window.scrollTo(left, top)
+      } else {
+        el.scrollTop = top
+        el.scrollLeft = left
+      }
     }
   })
 }