Streaming live at 10am (PST)

Distortion of an image on the safari browser

Hello I create my first site on webflow, I was able to put it online the problem is that on the safari browser the image of the home page is distorted as in the photo below, while on Chrome no problem.

Thank you in advance for your help !

Safari :

Chrome :

My website : https://www.romainboudot.com/

HI @romainb, thanks for your post.

I checked in Safari, but the layout is the same for me as in Chrome, see below:

Shared with CloudApp

Where you able to get that resolved on your end?

Thank you for your reply ! Indeed on my tablet and my phone using Safari no problem but on my computer the Safari browser I have this display problem I hope this is what I have :slight_smile:

Hi @romainb, thanks for your reply. I am using Safari on Desktop and see no issue, what version of safari are you using?

As the Designer of a site project and making Design changes, it is often helpful to first try the following steps:

– Try to reproduce the behavior while using Webflow in Incognito mode/Private window mode with browser extensions turned off.

– It may be helpful to disable the browser cache so that updated files are always downloaded instead of pulling old content from browser cache.

I hope this helps

I am on Mac OS Catalina can be that the problem comes from not having the last Mac version? thanks again

Hi @romainb, thanks for your quick update. Yes, that seems to be the issue, I can see the problem behaivor on safari with latest catalina:

Shared with CloudApp

I am not sure why that is yet, but I am checking to see if I can spot that.

As a note, Webflow publishes the same css and html for all browsers, the browsers also need to be capable to render the latest css spec, not all browsers do, such as Internet Explorer 11 etc.

Some earlier versions of Safari have some issues also too with background blend modes, a good place to check about compatibilities is https://caniuse.com.

thank you very much for your help, i’m waiting for your feedback

Hi @romainb, thanks, Would it be possible for you to help share some additional detail that will help to check the styles in the designer?

Yes of course

https://preview.webflow.com/preview/romain-boudot-site?utm_medium=preview_link&utm_source=designer&utm_content=romain-boudot-site&preview=e3dbcbc927227776201e2c5885bc07f4&workflow=preview

Hi @romainb, it looks like that page when rendered in catalina does not appreciate the display flex set on the grid item.

I would change this to display Block:

Shared with CloudApp

After making that change, republish and check again to see if that helps. Changing the display to block did not seem to affect the image position in the design.

Thank you very much indeed no more worries under the Safari browser while being on OS Catalina :slight_smile:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.