Streaming live at 10am (PST)

Website does not work correctly in Safari


#1

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


#2

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

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


#4

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


#5

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?

https://caniuse.com/#search=flexbox

thinking