MDB5 Parallax several issues


Topic: MDB5 Parallax several issues

webshapers pro premium priority asked a year ago

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


Grzegorz Bujański staff answered a year ago

Thanks for reporting this bug. We will fix it as soon as possible


webshapers pro premium priority answered a year ago

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...


webshapers pro premium priority answered a year ago

For the parallax-content that gets hidden behind the image it seems sufficient to add

.parallax .parallax-slider {
    z-index: -1;
}

Proof me wrong! ;-)


Grzegorz Bujański staff answered a year ago

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 :)


webshapers pro premium priority answered a year ago

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 a year 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.


webshapers pro premium priority answered a year ago

Any further information? I am getting a bit tired of constantly testing :-(


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • 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