Website does not work correctly in Safari

I work on a windows 10 machine and the website works fine in Chrome, Firefox, and Edge. I recently tested my website on an iPad and MacBook Air and the layout is not working correctly in Safari browsers.

Safari iPad: (White container is shrunk)

Safari MacBook Air: (Skips some cms items)

Any help is appreciated. :slight_smile:

Read-only

Live Website

Hi @SelectDesires

There’s a weird issue around Safari that I’ve encountered previously with items dropping. Shave .01% off the width and it seems to fix it, so for your desktop, try 24.9% as the width and see how you get on.

I will try and look more into that and find out why it happens though.

For the white content container, you have the height set as 100%, but there is nothing explicitly set to say what it should be 100% of, and Safari has a real issue with this. The parent has 100% height, but the parent of THAT needs to be told some height measurements so that they know how high 100% is.

(Think of it like me saying to you I want 50% of some rope, but the rope has an undefined length… what is 50%?) :smiley: :thinking:

giphy%20(2)

Please let me know if that helps at all! :crossed_fingers: :slight_smile:

3 Likes

Hi @magicmark

Awesome! I was able to fix the skipping of items by shaving 0.05% off of the 4 and 3 item rows and 0.1% for the 2 item rows.

Soo for the white box I have it set to 100% of 100% of nothing. :sweat_smile: However I need it to be responsive, and can’t really set a pixel value (?). Sometimes the title takes up one line, sometimes two. Not sure how to fix that. :thinking:

confusing%20math

You can either use minimum pixels, or my preferred height input is to use 30vw in the height (or any other number). This is a great way of keeping elements in proportion on various screen sizes. You can use it on fonts too (I recommend only using it on fonts on tablet breakpoint and below).

This works as VW and VH are measurement inputs you can use for anything, meaning Viewport Height (VH) and Viewport Width (VW).

CloudApp

So whatever the width of the device, that will determine the height of that element.
It’s pretty gooood and makes for a responsive site.

eyes

2 Likes

I really appreciate your help! :slightly_smiling_face:

I set it to min 20vw height, it increases the gap between the posts but it still does not fix the issue. The text is still clustered together like in pic 1. iPad is running ios safari 9, which supports flexbox, so I guess it’s not a flexbox issue either. :thinking: I’m a bit clueless tbh.

Speaking of flexbox, Internet Explorer freaks out when it tries to load my page. I’m guessing the only way to fix it is to not use flexbox?

thinking

Recently I faced the same problem. I worked on MACOS and the website didn’t work properly on the safari browser. I ask my manager and he told me that maybe. is there any solution for this issue?

Mod EDIT: Link removed due to malware

I feel like this question needs more attention. I am also having the issue of Safari and even any browser on an Apple OS not working properly with a Webflow site.

Safari interprets the CSS rule overflow hidden uniquely from other browsers. Normally overflow hidden will not influence the fixed position elements, but Safari will not be displaying it.

Can you please provide the source for this statement and how this specifically applies to the topic?

1 Like

Well, there are several things you could do to deal with the problem.

  1. Check whether the domain name is correct.
  2. Force restart the Safari and your iOD device.
  3. Delete the browser and install again.
  4. Use professional iOS system recovery tools such as TunesKit iOS System Repair to fix it.
  5. Contact Apple center.