Scrollmagic: 100% wide element gets its width value changed to pixel value when pinned

[ishunko]

In one of the demos at http://janpaepke.github.io/ScrollMagic/examples/advanced/section_wipes_manual.html

the panel "one" is originally set to width: 100%, but after scrolling down,when it is pinned, its position is updated to "fixed" the the width is is set to the pixel value equal to the window width (replacing the '100%'). As a result, if the window is resized, the panel doesn't fit the screen anymore.

Would it be possible to keep the width: 100% for the pinned element in this case? If not, what is the best way to resize all the panels to fit the screen.

[janpaepke]

It's set to pixels, because when an element is fixed, its relative width is calculated in relation to the body.
So if the parent of the pinned element is for example 100px and the pinned element is 100% it would be 100px, when unpinned and suddenly be the width of the body, once it's pinned.
To avoid this the size needs to be set in px during pin.

This size should also be automatically updated, when the element is resized.
The fact that it's not is clearly a bug and it will be fixed.

In the meantime you could use width: 100% !important for the pinned element to override the ScrollMagic px setting.

[silverbackis]

This may seem wrong but I've seen the code on 2018 of ScrollMagic.js

it is the IF statement asking if it is being called during a scene if I'm not mistaken.
"if(during){"

There is similar behaviour coded for height too. For me, it appears that just leaving the big of code that uses 100% and removing the part which reverts back to pixels worked well for me.
Website in progress: http://www.healthcaretest.org

If it isn't during down as during a scene, it'll put the relative 100% width in no problem.

When I comment out the if and leave the else code it works great for me. What are the downsides to this change? If I change my offset to 1, it'll update correctly but again, only when not in the scene.

[paddotk]

Hi, are there any updates coming up? The problem of my div not being centered still persists.

I'm not sure it's related to the width (I set a max-width that the div seems to comply to), but there is some other funny thing going on: certain styles are on page load overwritten by ScrollMagic. Before there even is any scrolling going on. I've tried, for instance, applying width: 100% !important or width: inherit to my scrollable div. But when the page loads, the div has width: 100% applied to it according to Chrome's inspector (which changes to a pixel value when the scrolling animation starts).

I hope you can do something about this. For me it's fine if the horizontal position is relative to the document.

[joegasewicz]

This needs a fix, wasted a few hours fiddling with different solutions as using !important in your styles is not ideal..., thanks.

[joegasewicz]

This seems to be caused due to the use of Window.getComputedStyle() which returns a 'resolved value', which resolutes CSS width or height values declared in percentages to a pixel equivalent. So I have found a fix for this:
Line 105 in feature-pinning.js
if (during && _util.css(_pin, "width") !== "100%") {
and line 241 in _util.js

if (options === 'width') {
  return elem.style.width;
} else {
    return _getComputedStyle(elem)[_camelCase(options)];
 }

I tried to push these changes in a new branch / PR but I'm blocked as I think i need the correct credentials to create PR's for Scrollmagic....?

[lazehang]

I fixed it by setting the width of the element on resize event for once.

something like:

document.addEventListener('resize', function() {
   const targetElement = document.querySelector('.scroll-trigger')
   targetElement.style.width = 100% //OR `${window.innerWidth}px`
})