How to fix stretched image when position is set to fixed on Safari

How To
1

Position fixed images with broken frames when viewed on mobile (when add link to)

Photo notes:
Photo 1-2: I configured a fixed image.
Photo 3: Viewed by phone, image broken. (when add link to)
Photo 4: Remove the incoming link to, normal photos are not broken when viewed on the phone.

I use tile latest version 1.9.4.

Is this error caused by bricks or my misconfiguration.

Hope for a help.

Thanks.

1
11920Ă—981 138 KB

2
21916Ă—978 135 KB

3
3946Ă—2048 114 KB

4
4946Ă—2048 70.7 KB

2

Hi @Jet,

Welcome to the forum :slight_smile:

Could you please share a live URL where I could see the issue?

1 Like
3

If I don’t have the link then the image won’t look broken on mobile.

The link is a broken image on mobile.

I send you the demo link: https://congnghemoicl.com/test-fixed

Tks you.

1
1333Ă—721 23.2 KB

4

Hi @Jet,

Ah, I see the issue now. This is an issue with Safari and how it’s calculating the height when the position is fixed when the height is being set to fit-content by default by Bricks. I believe the height should be set to “auto” in this case so I’ll create a ticket to see what other edge cases we’d need to consider.

But to solve your issue, you can set the image’s height to auto under Style > Layout.

5

Hi @Jet,

So after taking a further look, we think it’s best to set the height to auto manually as I mentioned in my previous reply. That’s due to the fit-content value being needed in other instances (e.g. in a CSS grid) and getting rid of it now can cause some issues on existing websites.

6

Hi Charaf,

is there an overall solution to this? i have tremendous problems on various cases on safari with this strechting of images…especially when i use display:grid for styling box-layouts with images or backgrond images…also in conjuction with background zoom-in effect (something which is by standard works easily on very old aand odd page builders…) we have really big problems…we wrote some special manual CSS and JS to deliver diffefren tseetings to safari and other browsers…but this cant be dont this way…those sites are not maintainable…
best wishes
timo

7

Hi @Timsta,

As this is a Safari issue I’m not sure what we can do here. But you could override the default Bricks styles globally in Bricks settings > Custom code > Custom CSS:

.brxe-image.tag {
    height: auto;
}