Image displays wrong size in Chrome, but okay in Safari

[Andy_Johnston]

Hi all,

I have created a layered illustration on my about page. At the tablet breakpoint the image adjusts correctly, and as per the designer/preview in Safari (right below). However, in Chrome, the background image is suddenly much smaller (left below). Any ideas on what is causing this glitch?

Many thanks

Andy

---

Here is my site Read-Only: https://preview.webflow.com/preview/datametryv2?utm_source=datametryv2&preview=f8f193b6e1bafccb3a13828779518a88
(how to share your site Read-Only link)

[aaronocampo]

Hello @Andy_Johnston

For some reason Safari and Chrome treat flex elements differently and I saw that you’re using flex to display the image, my recommendation here would be to access the designer through Safari and modify that image to your liking. This should fix the issue.

[Andy_Johnston]

Hi Aaron, thank you. So, I guess you mean to change it from flex to display?

I have done this, and used absolute positioning for the landscape within. This works okay, but unfortunately makes it harder for me to keep the horizon in view in the image. Any thoughts for how to keep the horizon in view?

And what is it that Chrome does differently? I notice all my other images built this way are okay.

Thanks again for the hints.

Andy

[aaronocampo]

I guess you mean to change it from flex to display?

No, I mean to set the flex settings on Safari.

And what is it that Chrome does differently?

It’s not Chrome but Safari, Safari handles flex elements different and doesn’t recognises the height of a parents element to set the heigh of that specific element.

Hope this makes sense.

[Andy_Johnston]

So, I was already working in Safari. So, my flex modifications were made there originally. In Chrome it doesn’t work.

Thanks for your help

[aaronocampo]

Oh ok, then do it the other way around, try to modify your project on Chrome and see if that does the trick.

[Andy_Johnston]

Hi Aaron, I took that advice and played in Chrome.

I’ve set the background to flex, and the image to 100% width. At desktop this works fine. But, at tablet the following is happening:

The selection box shows it is 100% width. But, the image contained within is only a fraction of the size. Unfortunately, I cannot see anyway to modify this, as I can’t see what is causing this behaviour.

Any thoughts,

Thanks again,

Andy

[aaronocampo]

What about using CSS background on a div? Do you think that can work?

[Andy_Johnston]

Hi Aaron, I ended up using that solution. Thank you. Originally I think I hoped to keep the Illustration Backgrounds separate. But, at this point, I just needed a fix.

Thanks again.