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!
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.
Related
Here's my website, I used a template for it
http://www.hdilapp.com
I tried it with 4 browsers:
Safari
Google Chrome
Firefox
Internet Explorer
Out of the 4, Safari performs the best. By "best", I mean the scrolling process is smooth. However, the scrolling is not smooth on Chrome occasionally. Well, for Firefox and IE, the scrolling is simply disappointing. It is very laggy.
This is my assumption right now: the reason that makes the scrolling so laggy is the way of the browser interpreting my code. However, I do not know which part of my code I should improve on.
My website is around 4.4MB. Is it because my website has too much to load? If that's the case, then why would Safari load my website so smoothly?
I'm not too familiar with html languages, thus, I don't understand the cause of this problem. Please help me!
Thanks :D
try analyzing your page here, it helped me a lot optimizing my sites:
https://developers.google.com/speed/pagespeed/insights/
Could be Hardware-dependent too, if you use different Devices for FF and Safari - some of my old Android Phones lag extremely...
I have a Drupal 7 site with a fluid image grid (4x4). As the browser scales down, the images do as well so everything fits nicely.
This runs smoothly on my PCs in Firefox, Chrome, and Safari 5. On the several Macs I've tested, it runs well in Firefox and Chrome.
If I try to do this in Safari on a Mac, it is extremely choppy. However, Safari 5 on certain Macs seems to run just fine, but one was a bit choppy. Across the board, Safari 6 is not smooth at all.
So far I've tried getting rid of all my js files, and I've also compressed my css and js through Drupal's settings.
Any suggestions would be welcome. Thanks!
After going though all javascript and css transitions, I couldn't find anything. We then switched the site from a cheap shared godaddy server to Rackspace cloudsites. Everything is smooth as can be.
I'm coding www.rootologyhealth.com and I cannot figure out why the Nav Bar on the homepage starts so high up in Safari and Firefox but looks perfect in chrome. I've done all the work I can to try to diagnose the problem. I'm certain its a stylesheet issue, but the styles I'm using are relatively simple and shouldn't be causing this problem.
For me, it's broken in Chrome 21 and fine in Firefox 14 on Windows 7.
When messing around with the developer tools in Chrome, if you take div#top-menu out of div.container, it no longer floats up above the viewable portion of the browser. You'll be left with a spacing issue between that and the large advert, but that should be simpler to deal with.
i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.