Topic: MDB5 Parallax several issues
Expected behavior A parallax image should always fill the whole parallax area.
Actual behavior
data-mdb-horizontal-alignment ="left" centers the image
data-mdb-horizontal-alignment ="right" leaves huge area uncovered on the right
data-mdb-horizontal-alignment ="center" leaves smaller area uncovered on the right
.parallax-content gets hidden behind the parallax image if it is not a card.
Resources (screenshots, code snippets etc.) https://mdbootstrap.com/snippets/standard/webshapers/2890788?view=standard#css-tab-view
I found out it might be about a css "left:xxx" value that gets js-injected to the .parallax .parallax-slider > img.My inspector shows me
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) 0s;
transform: translate3d(0px, 0px, 0px) scale(1.3);
will-change: transform;
position: absolute;
**left: -672px;
**top: 0px;
display: block;
opacity: 1;
If I reset these ominous -672px to auto, the image covers the whole area, no matter how wide my screen is. Still got no idea, which other implications this solution might have, though...
For the parallax-content that gets hidden behind the image it seems sufficient to add
.parallax .parallax-slider {
z-index: -1;
}
Proof me wrong! ;-)
It will definitely come in handy for us to fix this bug. We will check it and test it. Until we fix it, add such a solution as a workaround in your project. Let me know if you encounter any problems after applying this solution :)
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB 5
- MDB Version: 3.2.0
- Device: desktop
- Browser: chrome
- OS: os-x
- Provided sample code: No
- Provided link: Yes