Gallery has some floating issues in Safari when CDN enabled

In one of my pages, I have a gallery created using my Divi theme. In Safari the gallery has some floating issues. It happens randomly. When the issue appears if I disable Smush CDN it goes.

  • Tobias
    • Flash Drive

    Hi Dimitris!

    Thanks for your answer. I already told in chat that removing this rule seemed to help in Safari but leads to similar problems in Firefox. clear: both leads to an ordering of the images one under another.

    Since this morning everything works fine with the css settings as they are…. That’s why I suppose it might have something to do with the CDN delivery of the images. We had this once after enabling CDN and solvable by disabling CDN.

    Then it was just fine after enabling CDN and suddenly appeared when we checked yesterday evening. Today everything is fine again.

    Best regards,

    Tobias

  • Tobias
    • Flash Drive

    Hi Dimitris,

    just to confirm…. after yesterday they were no problems with the gallery I hat the problems again right now.

    They were appearing on Safari for Mac but not on Firefox for Mac. Disabling the CDN delivery of the images solved the problem. Re-enabling the feature made the problem appear again.

    Best regards,

    Tobias

  • Tobias
    • Flash Drive

    Now it’s getting even more interesting:

    I open the page in Safari on the laptop monitor (High DPI – Retina display) – the error appears. Moving the same Safari Window on a normal 1080p screen and pressing reload solves the error. Moving the window back to the retina laptop monitor recreates the error.

    So the three facts until now are:

    – the problem appears on Safari on MacBook Pro Retina screen

    – the problem is solvable by disabling CDN

    – the problem is solvable by moving the Safari window to a 1080p screen

    It is on some circumstances solvable by removing clear: none – but it creates issues on Firefox.

  • Dimitris
    • Support Star

    Hi Tobias

    I went ahead and commented out all of the clear: none !important; of the above part of the wp-content/themes/Divi-child/style.css file and I get good results in Chrome, Firefox and Safari, also tested in a 13.3″ retina display.

    Can you please have a look and let me know how that goes? :slight_smile:

    Thank you,

    Dimitris

  • Tobias
    • Flash Drive

    Hi Dimitris,

    commenting of the clear: none !important lines;
    – solves some issues on Safari, without getting worse in Firefox yes. It might have been an issue I only had playing around with it in my Developer tools
    – leads to new problems whenever there are only 3 images in a row
    – still has a problem with non floating images on iPhone

    And again…. I am retrying this again and again. By disabling the CDN all these problems are gone…
    Maybe it could also be an option to check what your CDN does in this case? I would like to proceed using it because it decreases the page size.

    Best regards,
    Tobias

  • Nahid
    • Tech Support

    Hey there Tobias !
    Hope you are doing well today!

    Thank you very much for following up with us. We have pinged the Smush developers regarding this with all the details so that they can check and see if they can provide any insights. Me or another colleague of mine will let you know here as soon as we have an update. We really appreciate your patience and consideration regarding this. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.