diff --git a/dev/src/class.ScrollScene.js b/dev/src/class.ScrollScene.js index 69b4eaa5..0c965c0b 100644 --- a/dev/src/class.ScrollScene.js +++ b/dev/src/class.ScrollScene.js @@ -474,7 +474,7 @@ pinned = (_pin.css("position") == "fixed"), vertical = _parent.info("vertical"), $spacercontent = _pinOptions.spacer.children().first(), // usually the pined element but can also be another spacer (cascaded pins) - marginCollapse = ($.inArray(_pinOptions.spacer.css("display"), ["block", "flex", "list-item", "table", "-webkit-box"]) > -1), + marginCollapse = isMarginCollapseType(_pinOptions.spacer.css("display")), css = {}; if (marginCollapse) { @@ -486,11 +486,11 @@ // set new size // if relsize: spacer -> pin | else: pin -> spacer - if (_pinOptions.relSize.width) { + if (_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) { if (pinned) { if ($(window).width() == _pinOptions.spacer.parent().width()) { // relative to body - _pin.css("width", "inherit"); + _pin.css("width", _pinOptions.relSize.autoFullWidth ? "100%" : "inherit"); } else { // not relative to body -> need to calculate _pin.css("width", _pinOptions.spacer.width()); @@ -499,7 +499,9 @@ _pin.css("width", "100%"); } } else { - css["min-width"] = $spacercontent.outerWidth(true); // needed for cascading pins + // minwidth is needed for cascading pins. + // margin is only included if it's a cascaded pin to resolve an IE9 bug + css["min-width"] = $spacercontent.outerWidth(!$spacercontent.is(_pin)); css.width = pinned ? css["min-width"] : "auto"; } if (_pinOptions.relSize.height) { @@ -524,7 +526,6 @@ css["padding" + (vertical ? "Top" : "Left")] = _options.duration * _progress; css["padding" + (vertical ? "Bottom" : "Right")] = _options.duration * (1 - _progress); } - _pinOptions.spacer.css(css); } }; @@ -551,7 +552,7 @@ if ( _parent && _pin && // well, duh _state === "DURING" && // element in pinned state? ( // is width or height relatively sized, but not in relation to body? then we need to recalc. - (_pinOptions.relSize.width && $(window).width() != _pinOptions.spacer.parent().width()) || + ((_pinOptions.relSize.width || _pinOptions.relSize.autoFullWidth) && $(window).width() != _pinOptions.spacer.parent().width()) || (_pinOptions.relSize.height && $(window).height() != _pinOptions.spacer.parent().height()) ) ) { @@ -1188,6 +1189,14 @@ sizeCSS = _pin.css(["width", "height"]); _pin.parent().show(); // hack end. + if (sizeCSS.width === "0px" && inFlow && isMarginCollapseType(pinCSS.display)) { + // log (2, "WARNING: Your pinned element probably needs a defined width or it might collapse during pin."); + } + if (!inFlow && settings.pushFollowers) { + log(2, "WARNING: If the pinned element is positioned absolutely pushFollowers is disabled."); + settings.pushFollowers = false; + } + // create spacer var spacer = $("
") .addClass(settings.spacerClass) @@ -1202,22 +1211,19 @@ "-webkit-box-sizing": "content-box" }); - if (!inFlow && settings.pushFollowers) { - log(2, "WARNING: If the pinned element is positioned absolutely pushFollowers is disabled."); - settings.pushFollowers = false; - } - // set the pin Options var pinInlineCSS = _pin[0].style; _pinOptions = { spacer: spacer, relSize: { // save if size is defined using % values. if so, handle spacer resize differently... width: sizeCSS.width.slice(-1) === "%", - height: sizeCSS.height.slice(-1) === "%" + height: sizeCSS.height.slice(-1) === "%", + autoFullWidth: sizeCSS.width === "0px" && inFlow && isMarginCollapseType(pinCSS.display) }, pushFollowers: settings.pushFollowers, inFlow: inFlow, // stores if the element takes up space in the document flow origStyle: { + width: pinInlineCSS.width || "", position: pinInlineCSS.position || "", top: pinInlineCSS.position || "", left: pinInlineCSS.position || "", diff --git a/dev/src/core.ScrollMagic.js b/dev/src/core.ScrollMagic.js index 18e2adeb..b8912385 100644 --- a/dev/src/core.ScrollMagic.js +++ b/dev/src/core.ScrollMagic.js @@ -4,14 +4,9 @@ @license Dual licensed under MIT license and GPL. @author Jan Paepke - e-mail@janpaepke.de -@todo: issues with min width on first page load (check main demo page) @todo: bug: when cascading pins (pinning one element multiple times) and later removing them without reset, positioning errors occur. @todo: bug: having multiple scroll directions with cascaded pins doesn't work (one scroll vertical, one horizontal) -@todo: bug: pin positioning problems with centered pins in IE9 (i.e. in examples) -@toto: improvement: check if its possible to take the recalculation of the start point out of the scene update, while still making sure it is always up to date (performance) @todo: feature: optimize performance on debug plugin (huge drawbacks, when using many scenes) -@todo: feature: consider public method to trigger pinspacerresize (in case size changes during pin) -@todo: feature: make pins work with -webkit-transform of parent for mobile applications. Might be possible by temporarily removing the pin element from its container and attaching it to the body during pin. Reverting might be difficult though (cascaded pins). */ (function($, window) { diff --git a/dev/src/utils.js b/dev/src/utils.js index 4598d98d..78b953b8 100644 --- a/dev/src/utils.js +++ b/dev/src/utils.js @@ -64,4 +64,7 @@ typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2 o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string" ); + }; + var isMarginCollapseType = function (str) { + return ["block", "flex", "list-item", "table", "-webkit-box"].indexOf(str) > -1; }; \ No newline at end of file