CODEWITHSUNDEEP
javascriptcsssafarimagnific-popup
xxtesaxx
xxtesaxx

Reputation: 6429

Safari doesn't hide elements with display:none after injecting them

I use the JS library MagnificPopup to display popups on my website when the user clicks on a "read more" button. MagnificPopup apparently takes my html, displays it at a different location and on close, it injects the html back to where it was. This works perfectly fine in all major browsers except for Safari.

For some reason, when the popup closes and the html is inejcted back to where it was, Safari doesn't hide the element properly even though I believe it should. The sorounding elemnt has display:none and I even tried to set width, height, padding and margin all to 0 but it doesn't work.

As soon as the window is resized, the element is hidden again but unless the window is resized, the layout is messed up.

This is the layout before: enter image description here

And this is the layout after clicking the read more button and closing the popup: enter image description here

You can see the problem here: https://demo.divi-pixel.com/creative/testimonials/

Can anybody explain why this is happening and why it's happening in Safari only? Does anybody have a workaround for this?

Upvotes: 0

Views: 249

Answers (1)

Congregator
Congregator

Reputation: 339

Have you tried visibility:hidden together with display:none?

Some browsers do not render well elements as hidden only with display:none, and keep 'virtual' space for the element instead. Including both directives should work just about always and everywhere.

Upvotes: 0

Related Questions