Doesn't work properly when using it with Bootstrap

[runarorested]

Hello, I'm trying to use parallax.js combined with Bootstrap.

I'm trying to use it in it's not trivial use (the data-parallax="scroll"), but since there are no samples for me to test if using it correctly except old issues like #225 (#225), I don't know if this is the correct use.

As far as I understand, you create a parallax box, and if used in trivial mode it will create a .parallax-mirror block and insert the image sourced into it. If not, it will look for an .parallax-slider inside it, and move it to the parallax-mirror if it does work, if it does not, it keeps it as it is, as a fallback in unsupported browsers.

As far I've managed to guess and try, if the .parallax-slider item does have a width specified with bootstrap, since it does use !important attributes, it will fail to calculate it's dimensions properly, and clip the background more that is required.

Also, it does assign coordinates and translations to the image inside .parallax-slider (.parallax-mirror > .parallax-slider > img), which does not allow to replace the img with a video or object element, whick I think it would be desireable.

While I've managed to make it work as a fallback, I don't know if it is the proper way to use it, or even if there is a way to make it work on a video tag.

Is it correct? Could you add a full example? I've tried creating a full set of samples in this codepen, and as you can see in the last two, they do not get resized as they should, due of them using .w-100 and .h-100 in the .parallax-slider.

https://codepen.io/Ruben-Martinez-Cabello/pen/BaeBOax

Will the next version fix this?