Image displays wrong size in Chrome, but okay in Safari

Andy_Johnston · May 10, 2019, 9:27pm

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 · May 10, 2019, 5:26pm

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 · May 10, 2019, 5:41pm

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 · May 10, 2019, 5:57pm

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

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 · May 10, 2019, 6:00pm

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 · May 10, 2019, 6:00pm

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 · May 10, 2019, 6:19pm

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 · May 10, 2019, 7:19pm

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

Andy_Johnston · May 14, 2019, 4:13pm

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.