Strange formatting on Safari

[matthewbusel]

Hi!

I built my portfolio site in Webflow and it’s working great when I view it in Chrome.

When I view the site in Safari though, the formatting gets all messed up. Super quick video explaining what I mean below: https://www.loom.com/share/91246714cb71479bb4eb88b33221cdf9

Any help would be highly appreciated!

[mikeyevin]

Welcome to the community @matthewbusel!

It’s going to be hard to diagnose the problem without taking a closer look at your project—can you include your read-only link so we can take a peek at how you’ve setup that section within the Designer?

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

[matthewbusel]

Thank you!

Here’s the read-only link: https://preview.webflow.com/preview/matthewbusel?utm_medium=preview_link&utm_source=dashboard&utm_content=matthewbusel&preview=06ad5530b7521bf23f14135e967f0ae6&mode=preview

[mikeyevin]

Are you mainly talking about the spacing above the logo and “Products” link or were there other issues?

I notice you have a section (.cursor-section) that’s housing all of your cursor design and some embed elements, so maybe try reducing the height to 0 and hiding any overflow. It’s possible (but unlikely) that Safari is applying some basic styles here—although I don’t have a way to test this since I’m on Windows.

Since various browsers can interpret code differently, it may be necessary to define values that is implied on one but not another. Webflow does a pretty good job, but ultimately there’s going to be some tweaks necessary to get things displaying the same—most of the time occurring between Chrome and Safari/iOS.

Feel free to let me know if there are any other issues your noticing, I couldn’t see anything else glaring in your video so any extra info will help.

[matthewbusel]

First of all thank you again for taking a look at this! The issue is specifically the one you mentioned with the added space on top in Safari.

Could you check out this link? https://preview.webflow.com/preview/matthewbusel?utm_medium=preview_link&utm_source=designer&utm_content=matthewbusel&preview=06ad5530b7521bf23f14135e967f0ae6&pageId=5f834d848f318d8675472724&mode=preview

I stripped away everything (including custom code) on this page except for this Navigation Wrap and it still is showing a weird difference between Chrome and Safari.

[mikeyevin]

Thanks for the update. Pretty strange such a simple page is still showing the issue, although it’s good to get things narrowed down.

Can you confirm the issue persists on an incognito Safari window with no extensions enabled? I’d also recommend removing the interactions—with testing between each one—to see if one of those is causing the issue.

I see one element interaction on your .body-2 element and three page interactions: