Safari messes up absolute positioning of graphic element

Hey everyone

I’ve placed a nice graphic element on the edge of a DIV block with text. In Chrome and MS Edge it works just fine. But it seems Safari messes up the positioning of the element.

Chrome (The way it’s supposed to look):

Safari (wrong):

It might be that I’ve set it up in a wrong way because I just started using Webflow a few days ago.
Can anybody help me out and tell me how to resolve this, pretty please?

Cheers,
Timo


https://preview.webflow.com/preview/bedrijfsontzorging-nl?utm_medium=preview_link&utm_source=designer&utm_content=bedrijfsontzorging-nl&preview=12505bd5687ff46c2ec5a6f8e1c96c4d&mode=preview

(how to share your site Read-Only link)

Hi Timo!

Thanks for including your share link. I really like your design!

It looks like the negative margin settings you set on your image is not being read on Safari. After a little Google search, it doesn’t look like negative margin works very well on Safari.

The fix I found is if you use the position properties instead! After setting the image to absolute, I used the preset that places it in the bottom right corner and then used the position controls to adjust it slightly to match what you had. Let me know if that works!

Hey Stacy

Thanks for the compliment about my design!
Nice to hear you like it!

I will go and try it out …
I’ll let you know if it worked!

Cheers

1 Like

Works like a charm!

Thanks you so much!

1 Like