From 8457e04427a2ce807c3dc920144be1fe3aab4242 Mon Sep 17 00:00:00 2001 From: Howard Yeh Date: Thu, 10 Sep 2015 21:23:44 +0800 Subject: [PATCH 1/2] Fixed centered pin offset problem If a pin is horizontally centered and its width is fixed (or auto width), taking it out of document flow by setting its position to fixed would cause the pin spacer to collapse to 0. The left offset of the pin spacer moves to the right because its width is now zero. This causes the pin to jump to the right as well. --- dev/src/ScrollMagic/Scene/feature-pinning.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/dev/src/ScrollMagic/Scene/feature-pinning.js b/dev/src/ScrollMagic/Scene/feature-pinning.js index 550b1691..2394f5e4 100644 --- a/dev/src/ScrollMagic/Scene/feature-pinning.js +++ b/dev/src/ScrollMagic/Scene/feature-pinning.js @@ -131,6 +131,11 @@ var updatePinDimensions = function () { css["padding" + (vertical ? "Top" : "Left")] = _options.duration * _progress; css["padding" + (vertical ? "Bottom" : "Right")] = _options.duration * (1 - _progress); } + + // Preserve the width of the pin spacer. When the _pin is set to 'fixed', the pin spacer would collapse to 0, + // and if it is horizontally centered (with flex or auto margin), its `left` would change. + css["width"] = _util.get.width(_pin); + _util.css(_pinOptions.spacer, css); } }; From 23491ec9117c0e1a458396b88a1fad44b918c876 Mon Sep 17 00:00:00 2001 From: Howard Yeh Date: Thu, 10 Sep 2015 21:35:09 +0800 Subject: [PATCH 2/2] make jshint happy --- dev/src/ScrollMagic/Scene/feature-pinning.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev/src/ScrollMagic/Scene/feature-pinning.js b/dev/src/ScrollMagic/Scene/feature-pinning.js index 2394f5e4..a7197747 100644 --- a/dev/src/ScrollMagic/Scene/feature-pinning.js +++ b/dev/src/ScrollMagic/Scene/feature-pinning.js @@ -134,7 +134,7 @@ var updatePinDimensions = function () { // Preserve the width of the pin spacer. When the _pin is set to 'fixed', the pin spacer would collapse to 0, // and if it is horizontally centered (with flex or auto margin), its `left` would change. - css["width"] = _util.get.width(_pin); + css.width = _util.get.width(_pin); _util.css(_pinOptions.spacer, css); }