From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 6 Sep 2017 09:31:00 +0000 (+0200)
Subject: Fix #1632 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=89d8af74f5bdd63810030b29fe9eb2af41094053;p=fluidbook-html5.git

Fix #1632 @0.5
---

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 2f5a1153..28efa5ad 100644
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -24,6 +24,10 @@ function FluidbookResize(fluidbook) {
 FluidbookResize.prototype = {
     init: function () {
 
+        // Manage transform origins based on text direction
+        // This is important for the elements to have the correct position after scaling
+        // Note: the #logo is handled in the CSS because it is also affected by the .menu-inverted class
+
         var left = this.fluidbook.l10n.dir == 'ltr' ? '0%' : '100%';
         var right = this.fluidbook.l10n.dir == 'ltr' ? '100%' : '0%';
 
@@ -31,10 +35,6 @@ FluidbookResize.prototype = {
             origin: [left, '0%']
         });
 
-        $("#logo").transform({
-            origin: [right, '0%']
-        });
-
         $("#footer").transform({
             origin: [right, '100%']
         });
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 2a89fb59..d140382e 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -734,12 +734,14 @@ header {
 	.ltr &, .rtl.menu-inverted & {
 		right: 0;
 		left: auto;
+		transform-origin: 100% 0; // Top right transform origin so positioning is correct after scaling
 	}
 
 	// Positioning for right-to-left Fluidbooks + inverted menu on LTR
 	.rtl &, .ltr.menu-inverted & {
 		left: 0;
 		right: auto;
+		transform-origin: 0 0; // Top left transform origin so positioning is correct after scaling
 	}
 }