#73 Positioning is fixed again

chrome/skin/classic/shared/ua.css

@@ -24,9 +24,19 @@ div:-moz-native-anonymous .pixelperfect-layer-box[invert] img {
   https://github.com/firebug/pixel-perfect/issues/67
   They can both be removed as soon as the platform is fixed:
   https://bugzilla.mozilla.org/show_bug.cgi?id=1168113
-*/
+
+  This gets yet more complex since there is currently no
+  CSS way how to avoid fixed position:
+  https://bugzilla.mozilla.org/show_bug.cgi?id=1230508#c26
+  The only way is using 'scroll' events and update position
+  of layers manually.
+
+  The CSS is currently using position: fixed (in addition to
+  the manual scroll-offset calculation). As soon as 'absolute'
+  is supported again it should be removed */
 div:-moz-native-anonymous.moz-custom-content-container {
-  position: absolute;
+  /*position: absolute;*/
+  position: fixed;
 }
 
 :-moz-native-anonymous .highlighter-container {

lib/pixel-perfect-actor.js

@@ -126,6 +126,7 @@ var PixelPerfectActor = ActorClass(
     this.onMouseMove = this.onMouseMove.bind(this);
     this.onMouseUp = this.onMouseUp.bind(this);
     this.onMouseClick = this.onMouseClick.bind(this);
+    this.onScroll = this.onScroll.bind(this);
   },
 
   /**
@@ -214,6 +215,7 @@ var PixelPerfectActor = ActorClass(
     DomEvents.removeListener(doc, "mousemove", this.onMouseMove);
     DomEvents.removeListener(doc, "mouseup", this.onMouseUp);
     DomEvents.removeListener(doc, "click", this.onMouseClick);
+    DomEvents.removeListener(doc, "scroll", this.onScroll);
   }), {
     request: {},
     response: {
@@ -393,6 +395,7 @@ var PixelPerfectActor = ActorClass(
     DomEvents.on(doc, "mousemove", this.onMouseMove);
     DomEvents.on(doc, "mouseup", this.onMouseUp);
     DomEvents.on(doc, "click", this.onMouseClick);
+    DomEvents.on(doc, "scroll", this.onScroll);
   },
 
   buildLayers: makeInfallible(function() {
@@ -441,16 +444,25 @@ var PixelPerfectActor = ActorClass(
   }),
 
   updateLayer: makeInfallible(function(layer) {
+    let win = this.parent.window;
+
     let content = layer.content;
     if (!content) {
       this.buildLayer(layer);
       return;
     }
 
+    // Include window scroll offset into the final position.
+    // There is currently no way how to avoid fixed position
+    // for anonymous content using CSS.
+    // See ua.css stylesheet for more details.
+    let x = parseInt(layer.x, 10) - win.pageXOffset;
+    let y = parseInt(layer.y, 10) - win.pageYOffset;
+
     // Update image box styles
     let boxStyle = "";
-    boxStyle += "left:" + parseInt(layer.x, 10) + "px;";
-    boxStyle += "top:" + parseInt(layer.y, 10) + "px;";
+    boxStyle += "left:" + x + "px;";
+    boxStyle += "top:" + y + "px;";
     boxStyle += "display:" + (layer.visible ? "block" : "none") + ";";
     content.setAttributeForElement("box" + layer.id, "style", boxStyle);
 
@@ -556,6 +568,31 @@ var PixelPerfectActor = ActorClass(
     //xxxHonza: select the clicked layer, so it can be moved by keyboard?
   },
 
+  onScroll: function(event) {
+    if (this.scrolling) {
+      return;
+    }
+
+    this.scrolling = true;
+
+    // Since scroll events can fire at a high rate, the update
+    // shouldn't happen too often. Instead, throttle the event
+    // and update layers position only using requestAnimationFrame.
+    // This is great for avoiding 'delayed' effect when layers jump
+    // a bit when the user scrolls. But note, that when the user
+    // is using mouse-wheel for scrolling little jumping is still
+    // there.
+    let win = this.parent.window;
+    win.requestAnimationFrame(timestamp => {
+      this.scrolling = false;
+
+      // Update position of all layers.
+      for (let i=0; i<this.layers.length; i++) {
+        this.updateLayer(this.layers[i]);
+      }
+    });
+  },
+
   // Layer Helpers
 
   getLayer: function(id) {