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
Anything new on this issue? Unfortunately we found another problem that we can't fix in a clean way: Accessibility checkers will complain severely about a missing alt-tag on the parallax-slider-image. Generally I would suggest to simply inject an empty alt="" on parallax images. @Grzegorz Bujański Do you see a chance to fix this soon? Thank you!
Grzegorz Bujański staff commented 3 years ago
We are at the stage of fixing the errors reported to us, but I am not able to say which of them can be fixed in this release and which in later ones. Some bugs have been fixed recently and a new version of the parallax plugin has appeared. We will definitely try to fix the remaining bugs as soon as possible.
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 :)
For the parallax-content that gets hidden behind the image it seems sufficient to add
.parallax .parallax-slider {
z-index: -1;
}
Proof me wrong! ;-)
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...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: desktop
- Browser: chrome
- OS: os-x
- Provided sample code: No
- Provided link: Yes