Streaming live at 10am (PST)

Element (set to absolute) not showing up correctly in Safari

On my client’s website, there is a section where they showcase screenshots of their app using Webflow tabs.

The screenshots are separate elements from the iPhone frame, so the iPhone frame is set to absolute. On Chrome it aligns as intended, but on Safari, the iPhone frame is falling below the screenshots.

Chrome:

Safari:

Any thoughts on what could be going on here?


Here is my site Read-Only: [LINK][1]
https://preview.webflow.com/preview/oh-website-e2158c?utm_medium=preview_link&utm_source=designer&utm_content=oh-website-e2158c&preview=d81f4d51aec7bc41bec078f0f44c7ca9&workflow=preview

So I’m not sure if I had something set up wrong or I just found a workaround for Safari, but as I was digging further I found a rather simple solution.

The problem didn’t seem to be with the iPhone frame, but with the screenshots underneath (which were the content for the tabs).

What I did was wrap the screenshots in a div block, and add some slight padding on top. After doing that, the screenshots didn’t slide up past the iPhone frame.

Below is how I structured the screenshots (class: content image) inside of the div block (class: content image parent):