Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seamlessly in all major browsers, Safari presents an issue.
In Safari, upon closing the popup and injecting the html back, the element is not hidden properly as expected. Even after setting display:none and adjusting other style properties like width, height, padding, and margin to 0, the problem persists.
The element only reverts to its hidden state if the window is resized, which results in layout distortion until that point.
Prior to activating the read more feature:
After clicking the read more button and closing the popup:
To see the problem firsthand, visit:
If anyone can shed light on why this anomaly occurs exclusively in Safari or offer any workaround solutions, your insights would be greatly appreciated.