From 39731c6ddc28febe844235dfbfd7dd222367820d Mon Sep 17 00:00:00 2001
From: Tim Dawborn <tim.dawborn@gmail.com>
Date: Sat, 28 Jan 2017 04:19:58 +1100
Subject: [PATCH] Change CSS transforms to work with older browsers (#879)

* Change the setting of the CSS transform properties on SVG nodes to set both the unprefixed version and the `-webkit-` prefixed version so that Blockly correctly renders in order browsers, such as Safari < 9 and iOS Safari < 9.2. For discussion of this issue, see https://groups.google.com/forum/#!topic/blockly/o3pERaRQhSg

* Correct the separation between the CSS transform property and the rest of the CSS that was in the variable misleadingly called "transform".
---
 core/block_drag_surface.js         |  7 +++----
 core/flyout.js                     |  2 +-
 core/scrollbar.js                  |  2 +-
 core/utils.js                      | 12 ++++++++++++
 core/workspace_drag_surface_svg.js |  4 ++--
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/core/block_drag_surface.js b/core/block_drag_surface.js
index 195e7e9e8..942dfa3b9 100644
--- a/core/block_drag_surface.js
+++ b/core/block_drag_surface.js
@@ -137,16 +137,15 @@ Blockly.BlockDragSurfaceSvg.prototype.translateAndScaleGroup = function(x, y, sc
  * @param {number} y Y translation for the entire surface.
  */
 Blockly.BlockDragSurfaceSvg.prototype.translateSurface = function(x, y) {
-  var transform;
   x *= this.scale_;
   y *= this.scale_;
   // This is a work-around to prevent a the blocks from rendering
   // fuzzy while they are being dragged on the drag surface.
   x = x.toFixed(0);
   y = y.toFixed(0);
-  transform =
-    'transform: translate3d(' + x + 'px, ' + y + 'px, 0px); display: block;';
-  this.SVG_.setAttribute('style', transform);
+  this.SVG_.style.display = 'block';
+  Blockly.utils.setCssTransform(this.SVG_,
+      'translate3d(' + x + 'px, ' + y + 'px, 0px)');
 };
 
 /**
diff --git a/core/flyout.js b/core/flyout.js
index 41003740f..772208079 100644
--- a/core/flyout.js
+++ b/core/flyout.js
@@ -500,7 +500,7 @@ Blockly.Flyout.prototype.position = function() {
   this.svgGroup_.setAttribute("width", this.width_);
   this.svgGroup_.setAttribute("height", this.height_);
   var transform = 'translate(' + x + 'px,' + y + 'px)';
-  this.svgGroup_.style.transform = transform;
+  Blockly.utils.setCssTransform(this.svgGroup_, transform);
 
   // Update the scrollbar (if one exists).
   if (this.scrollbar_) {
diff --git a/core/scrollbar.js b/core/scrollbar.js
index 8dea236d7..ee461085a 100644
--- a/core/scrollbar.js
+++ b/core/scrollbar.js
@@ -384,7 +384,7 @@ Blockly.Scrollbar.prototype.setPosition = function(x, y) {
   var tempX = this.position_.x + this.origin_.x;
   var tempY = this.position_.y + this.origin_.y;
   var transform = 'translate(' + tempX + 'px,' + tempY + 'px)';
-  this.outerSvg_.style.transform = transform;
+  Blockly.utils.setCssTransform(this.outerSvg_, transform);
 };
 
 /**
diff --git a/core/utils.js b/core/utils.js
index ff00c22b6..453d49b34 100644
--- a/core/utils.js
+++ b/core/utils.js
@@ -856,3 +856,15 @@ Blockly.utils.runAfterPageLoad = function(fn) {
     }, 10);
   }
 };
+
+/**
+ * Sets the CSS transform property on an element. This function sets the
+ * non-vendor-prefixed and vendor-prefixed versions for backwards compatibility
+ * with older browsers. See http://caniuse.com/#feat=transforms2d
+ * @param {!Element} node The node which the CSS transform should be applied.
+ * @param {string} transform The value of the CSS `transform` property.
+ */
+Blockly.utils.setCssTransform = function(node, transform) {
+  node.style['transform'] = transform;
+  node.style['-webkit-transform'] = transform;
+};
diff --git a/core/workspace_drag_surface_svg.js b/core/workspace_drag_surface_svg.js
index c2090d07f..ad18296bc 100644
--- a/core/workspace_drag_surface_svg.js
+++ b/core/workspace_drag_surface_svg.js
@@ -115,7 +115,7 @@ Blockly.workspaceDragSurfaceSvg.prototype.translateSurface = function(x, y) {
 
   var transform =
     'transform: translate3d(' + x + 'px, ' + y + 'px, 0px); display: block;';
-  this.SVG_.setAttribute('style', transform);
+  Blockly.utils.setCssTransform(this.SVG_, transform);
 };
 
 /**
@@ -158,7 +158,7 @@ Blockly.workspaceDragSurfaceSvg.prototype.clearAndHide = function(newSurface) {
   this.SVG_.style.display = 'none';
   goog.asserts.assert(this.SVG_.childNodes.length == 0,
     'Drag surface was not cleared.');
-  this.SVG_.style.transform = '';
+  Blockly.utils.setCssTransform(this.SVG_, '');
   this.previousSibling_ = null;
 };