Topic: MDB5 Parallax several issues

webshapers priority asked 3 years 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


webshapers priority answered 3 years ago


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


webshapers priority answered 3 years 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 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.


Grzegorz Bujański staff answered 3 years 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 priority answered 3 years 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! ;-)


webshapers priority answered 3 years 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...


Grzegorz Bujański staff answered 3 years ago


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



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

  • 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