Fix Overlay bubbles on Firefox (and Opera Mini) (#11485)

* Fix Overlay bubbles on Firefox (and Opera Mini)

The previous css didn't work on firefox (http://caniuse.com/#search=zoom). Using transform: scale() is the recommended way to do it according to

* Update client.css

2 files changed, 15 insertions, 6 deletions

diff --git a/plugins/Overlay/client/client.css b/plugins/Overlay/client/client.css
index 80e526a232..7431ab1efb 100644
--- a/plugins/Overlay/client/client.css
+++ b/plugins/Overlay/client/client.css
@@ -41,6 +41,7 @@
     text-align: left;
     background: url(./linktags_lessshadow.png) no-repeat 0 -21px;
     overflow: hidden;
+    transform-origin: 100% 50%;
 }
 
 .PIS_LinkTag span {
@@ -64,6 +65,7 @@
 
 .PIS_LinkTag.PIS_Right {
     background-position: -36px -21px;
+    transform-origin: 0% 50%;
 }
 
 .PIS_LinkTag.PIS_Right span,
@@ -73,6 +75,7 @@
 
 .PIS_LinkTag.PIS_Bottom {
     background-position: 0 0;
+    transform-origin: 100% 50%;
 }
 
 .PIS_LinkTag.PIS_Bottom span,
@@ -82,6 +85,7 @@
 
 .PIS_LinkTag.PIS_BottomRight {
     background-position: -36px 0;
+    transform-origin: 0% 50%;
 }
 
 /**
@@ -135,4 +139,4 @@
 #PIS_StatusBar .PIS_Loading {
     background: url(./loading.gif) no-repeat right center;
     padding-right: 30px;
-}
\ No newline at end of file
+}
diff --git a/plugins/Overlay/client/followingpages.js b/plugins/Overlay/client/followingpages.js
index eb3ff3b80d..33e924c4ca 100644
--- a/plugins/Overlay/client/followingpages.js
+++ b/plugins/Overlay/client/followingpages.js
@@ -258,21 +258,26 @@ var Piwik_Overlay_FollowingPages = (function () {
                     }
 
                     var zoomFactor = 1 + +tagElement.attr('data-rateofmax');
-                    tagElement.css({'zoom':zoomFactor, 'opacity': zoomFactor/2 });
-                    offset.top = offset.top / zoomFactor;
-                    offset.left = offset.left / zoomFactor;
+                    tagElement.css({
+                        '-webkit-transform': 'scale(' + zoomFactor + ')', 
+                        '-moz-transform': 'scale(' + zoomFactor + ')', 
+                        '-ms-transform': 'scale(' + zoomFactor + ')', 
+                        '-o-transform': 'scale(' + zoomFactor + ')', 
+                        'transform': 'scale(' + zoomFactor + ')',
+                        'opacity': zoomFactor/2 
+                    });
 
                     top = offset.top - tagHeight + 6;
                     left = offset.left - tagWidth + 10;
 
                     if (isRight = (left < 2)) {
                         tagElement.addClass('PIS_Right');
-                        left = offset.left + linkTag.outerWidth() / zoomFactor - 10;
+                        left = offset.left + linkTag.outerWidth() - 10;
                     }
 
                     if (top < 2) {
                         tagElement.addClass(isRight ? 'PIS_BottomRight' : 'PIS_Bottom');
-                        top = offset.top + linkTag.outerHeight() / zoomFactor - 6;
+                        top = offset.top + linkTag.outerHeight() - 6;
                     }
 
                     tagElement.css({