safari: workaround SVG position bug

This commit fixes videos rendering in the wrong place on Safari (and all
iOS browsers). Note that it will still need the server fixes contained
in #7367 for Safari to
play video

To reproduce, load a document with an mp4 video in Safari (this may also
work with other formats, but we know of unrelated bugs with non-mp4
videos) and click on the place where the video should be.

Before this commit, you will see a white rectangle where the video
should appear. After this commit, you will see the video. If you have
this commit but not #7367 you will see a play button with a "broken
video" strikethrough. In non-Safari/iOS browsers you will see the video
both before and after this commit.

This commit does not include detection for the upcoming Layer-Based SVG
engine <https://wpewebkit.org/blog/05-new-svg-engine.html>. This means
that this commit will *break* video if this is enabled in Safari debug
mode.  If this commit is merged as-is we need to make a followup to fix
this as soon as possible or we will end up with a similar-but-opposite
bug when that flag is toggled on by default.

Signed-off-by: Skyler Grey <[email protected]>
Change-Id: I205e692e7027ad917bd6f29aa96b0ac70a4c9e04

browser/src/layer/vector/SVGGroup.js

@@ -78,6 +78,24 @@ L.SVGGroup = L.Layer.extend({
 		var point = this._map.latLngToLayerPoint(this._bounds.getNorthWest());
 		svgLastChild.setAttribute('x', point.x);
 		svgLastChild.setAttribute('y', point.y);
+
+		var videoContainer = svgLastChild.querySelector('body');
+
+		function _fixSVGPos() {
+			var mat = svgLastChild.getScreenCTM();
+			var boundingBox = this._renderer._container.getBoundingClientRect();
+			videoContainer.style.transform = 'matrix(' + [mat.a, mat.b, mat.c, mat.d, mat.e - boundingBox.x, mat.f - boundingBox.y].join(', ') + ')';
+		}
+		var fixSVGPos = _fixSVGPos.bind(this);
+
+		if (L.Browser.safari) {
+			fixSVGPos();
+			var observer = new MutationObserver(fixSVGPos);
+
+			observer.observe(this._renderer._container, {
+				attributes: true
+			});
+		}
 	},
 
 	addEmbeddedSVG: function (svgString) {