translateDOMPositionXY.js.flow 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /**
  2. * Copyright (c) 2013-present, Facebook, Inc.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @providesModule translateDOMPositionXY
  8. * @typechecks
  9. */
  10. 'use strict';
  11. const BrowserSupportCore = require("./BrowserSupportCore");
  12. const getVendorPrefixedName = require("./getVendorPrefixedName");
  13. const TRANSFORM = getVendorPrefixedName('transform');
  14. const BACKFACE_VISIBILITY = getVendorPrefixedName('backfaceVisibility');
  15. const translateDOMPositionXY = function () {
  16. if (BrowserSupportCore.hasCSSTransforms()) {
  17. const ua = global.window ? global.window.navigator.userAgent : 'UNKNOWN';
  18. const isSafari = /Safari\//.test(ua) && !/Chrome\//.test(ua); // It appears that Safari messes up the composition order
  19. // of GPU-accelerated layers
  20. // (see bug https://bugs.webkit.org/show_bug.cgi?id=61824).
  21. // Use 2D translation instead.
  22. if (!isSafari && BrowserSupportCore.hasCSS3DTransforms()) {
  23. return function (
  24. /*object*/
  25. style,
  26. /*number*/
  27. x,
  28. /*number*/
  29. y) {
  30. style[TRANSFORM] = 'translate3d(' + x + 'px,' + y + 'px,0)';
  31. style[BACKFACE_VISIBILITY] = 'hidden';
  32. };
  33. } else {
  34. return function (
  35. /*object*/
  36. style,
  37. /*number*/
  38. x,
  39. /*number*/
  40. y) {
  41. style[TRANSFORM] = 'translate(' + x + 'px,' + y + 'px)';
  42. };
  43. }
  44. } else {
  45. return function (
  46. /*object*/
  47. style,
  48. /*number*/
  49. x,
  50. /*number*/
  51. y) {
  52. style.left = x + 'px';
  53. style.top = y + 'px';
  54. };
  55. }
  56. }();
  57. module.exports = translateDOMPositionXY;