Website completely broken in Safari

Question

I've noticed something really strange; my website ( http://wizztune.com ) looks absolutely and completely fine in Chrome and Firefox but broken and some sections are missing in Safari. Also, Safari treats my "position: fixed" attributes as if they were ignored. There's just a lot of stuff that seems broken; any idea why is this and if there's any way for me to fix it without rewriting every single line of the stylesheets?

Screenshots - also notice that Safari leaves out a few sections of the page in the second screenshot and breaks the "fixed" elements in the fourth one:

http://wizztune.com/wt_chrome.png

http://wizztune.com/wt_safari.png

http://wizztune.com/wt_chrome2.png

http://wizztune.com/wt_safari2.png

Thank you, any help will be greatly appreciated!

Answer 1

That is Safari for Windows, that project was abandoned many years ago. Your site looks totally fine here on Safari for Mac. Don't worry.

So Chrome and Safari shares the same engine WebKit, although Chrome switched to Blink a while ago, but it is still WebKit (slimmer version). Ideally, if the site runs fine on Chrome, it will be generally fine on Safari too (I'm not talking about the older versions).

One more thing: Chrome is CSS prefix free, however Safari may need -webkit* prefix for some cutting edge features. You can quickly find out on http://caniuse.com/ or Mozilla https://developer.mozilla.org/ if you need.