react-flexigrid/lib/dom/translateDOMPositionXY.js

A React table component designed to allow presenting millions of rows of data.

import { hasCSSTransforms, hasCSS3DTransforms } from './browserSupport';
import getVendorPrefixedName from './getVendorPrefixedName';

var transform = getVendorPrefixedName('transform');
var backfaceVisibility = getVendorPrefixedName('backfaceVisibility');

var translateDOMPositionXY = function () {
  if (hasCSSTransforms()) {
    var ua = global.window ? global.window.navigator.userAgent : '';
    var isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua);

    // It appears that Safari messes up the composition order
    // of GPU-accelerated layers
    // (see bug https://bugs.webkit.org/show_bug.cgi?id=61824).
    // Use 2D translation instead.
    if (!isSafari && hasCSS3DTransforms()) {
      return function (style, x, y) {
        style[transform] = 'translate3d(' + x + 'px,' + y + 'px,0)';
        style[backfaceVisibility] = 'hidden';
      };
    }

    return function (style, x, y) {
      style[transform] = 'translate(' + x + 'px,' + y + 'px)';
    };
  }
  return function (style, x, y) {
    style.left = x + 'px';
    style.top = y + 'px';
  };
}();

export default translateDOMPositionXY;