Modal bug glitch

[Peter789]

Hi there,

I noticed when I added blur filter for the modal background, the transition is not good…

How can I fix this?

[ruenel]

Hey Peter,

Thanks for writing in! I checked your layout and I found this custom CSS:

.x-modal-bg {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

You may need to add a transition to your custom CSS.

• https://www.w3schools.com/css/css3_transitions.asp

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[Peter789]

Hi Ruenel,

For some reason it does not work?

I tried adding:

.x-modal-bg {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition-timing-function: cubic-bezier(0.4,0,0.2,1);
    transition-duration: 500ms;
    transition-property: background-color, box-shadow, opacity, filter, transform;
}

I added 500ms same like the modal background color effect duration… but it does not work? What did I do wrong

[ruenel]

Hello Peter,

Tweak your code and try to use .x-modal on your code. Again, may I remind you that coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Cheers.