WIP Detect browser for real max element size

source/Grid/Grid.jest.js

@@ -8,7 +8,7 @@ import {
   SCROLL_DIRECTION_BACKWARD,
   SCROLL_DIRECTION_FORWARD,
 } from './defaultOverscanIndicesGetter';
-import {DEFAULT_MAX_SCROLL_SIZE} from './utils/ScalingCellSizeAndPositionManager';
+import {getMaxElementSize} from './utils/maxElementSize.js';
 
 const DEFAULT_COLUMN_WIDTH = 50;
 const DEFAULT_HEIGHT = 100;
@@ -2290,7 +2290,7 @@ describe('Grid', () => {
         height: 100,
         rowHeight: 100,
         columnWidth: 100,
-        rowCount: DEFAULT_MAX_SCROLL_SIZE * 2 / 100, // lots of offset
+        rowCount: getMaxElementSize() * 2 / 100, // lots of offset
         scrollTop: 2000,
       }),
     );

source/Grid/utils/ScalingCellSizeAndPositionManager.js

@@ -3,6 +3,7 @@
 import type {Alignment, CellSizeGetter, VisibleCellRange} from '../types';
 
 import CellSizeAndPositionManager from './CellSizeAndPositionManager';
+import {getMaxElementSize} from './maxElementSize.js';
 
 type ContainerSizeAndOffset = {
   containerSize: number,
@@ -14,7 +15,6 @@ type ContainerSizeAndOffset = {
  * After a certain position, the browser won't allow the user to scroll further (even via JavaScript scroll offset adjustments).
  * This util picks a lower ceiling for max size and artificially adjusts positions within to make it transparent for users.
  */
-export const DEFAULT_MAX_SCROLL_SIZE = 1500000;
 
 type Params = {
   maxScrollSize?: number,
@@ -31,7 +31,7 @@ export default class ScalingCellSizeAndPositionManager {
   _cellSizeAndPositionManager: CellSizeAndPositionManager;
   _maxScrollSize: number;
 
-  constructor({maxScrollSize = DEFAULT_MAX_SCROLL_SIZE, ...params}: Params) {
+  constructor({maxScrollSize = getMaxElementSize(), ...params}: Params) {
     // Favor composition over inheritance to simplify IE10 support
     this._cellSizeAndPositionManager = new CellSizeAndPositionManager(params);
     this._maxScrollSize = maxScrollSize;

source/Grid/utils/maxElementSize.js

@@ -0,0 +1,42 @@
+// @flow
+
+const DEFAULT_MAX_ELEMENT_SIZE = 1500000;
+
+const isChrome = () => !!window.chrome && !!window.chrome.webstore;
+
+const isFirefox = () => typeof window.InstallTrigger !== 'undefined';
+
+const isSafari = () =>
+  /constructor/i.test(window.HTMLElement) ||
+  (p => p.toString() === '[object SafariRemoteNotification]')(
+    !window['safari'] ||
+      (typeof window.safari !== 'undefined' && window.safari.pushNotification),
+  );
+
+const isOpera = () =>
+  (!!window.opr && !!window.opr.addons) ||
+  !!window.opera ||
+  navigator.userAgent.indexOf(' OPR/') >= 0;
+
+const elementSizesPerBrowser = {
+  chrome: 33554428,
+  safari: 33554428,
+  opera: 33554428,
+  firefox: 17895696,
+};
+
+export const getMaxElementSize = (): number => {
+  if (isChrome()) {
+    return elementSizesPerBrowser.chrome;
+  }
+  if (isSafari()) {
+    return elementSizesPerBrowser.safari;
+  }
+  if (isOpera()) {
+    return elementSizesPerBrowser.opera;
+  }
+  if (isFirefox()) {
+    return elementSizesPerBrowser.firefox;
+  }
+  return DEFAULT_MAX_ELEMENT_SIZE;
+};