I've tested in Chrome, do I need to test in Safari?
I've noticed Safari handles Asian characters better than Chrome.
Also Chrome and Safari rely on the same Webkit for rendering pages, but their Javascript engines are totally different, so if you use Javascript in your pages you need to check both.
Browsershots will send you screen shots of your page in just about every browser ever made.
Safari uses 'mac' fonts, but Chrome would use 'Windows' fonts. I've noticed that there can sometimes be problems where using a font like Arial, it shows up fine in firefox/chrome/ie, but on Safari, it can cause a line to wrap because the font is slightly bigger.
Yes, but only for your fonts and JavaScripts.
I have noticed some of the default fonts are smaller on Safari then Chrome, also Chrome uses the V8 JavaScript engine which has caused some people problems, especially if you have a lot of form logic.
yes.
Oh, you wanted more detail? Simply, Chrome and Safari have a lot of different features in their implementations, and Safari is pretty widely used. If you expect the general public, and particularly those of us who work on Macs, to use your application, it would behoove you to test in the Safari browser.
Yes, safari and chrome even though they are using webkit the two versions of webkit that are being used are significantly different. So you need to restest.
In a word, No. You can't assume that because it works in one it will definitely work in all cases in the other. Sure, 99% of the time, it might be the same - but 99% isn't 100% - at least, it wasn't last time I checked. Call me a pedantic git if you like.
Related
I've read through dozens of SO threads on how to get orientation on Safari browsers. Almost every single answer recommends using window.orientation. This is documented as the recommended method here, since screen.orientation is not available on Safari, which is indicated on the MDN docs (even though it's marked as deprecated).
Great, so it just seems I have to check window.orientation if Safari is the detected browser. But that always returns undefined. I've tried checking all available functions when I inspect window inside a Safari browser, but there's no mention of any function that contains the word "orientation" in it.
I've inspected the attributes available within window.screen, but there is no mention of anything related to orientation or even the angle of the screen.
Cool. So how does one go about determining the orientation on this amazingly developer-friendly browser? I'm open to super obscure hacks, as that's been my go-to for most Safari functionality in the past.
I'm having a problem with layout in Safari that works fine in Chrome and FF. It seems that Safari includes the padding within the width while Chrome and FF don't. So what's 630px in FF
due to width + padding is only 600px in Safari. This: Padding in mozilla firefox and in safari seems to show that the box model is different in Safari. If so I would expect a standard solution would already have come up but when I google this, it seems that hardly anyone has this problem.
Is the box model in Safari really different and is there a standard solution? Or do I just have to 'debug' my CSS?
EDIT: apparently it's because the div was using display: table. When I changed it to display: block, it worked as expected. It's still strange though because it's working fine in other browsers (display: table).
Which doctype are you using? When I use < !DOCTYPE html > (the HTML5 doctype declaration) Safari and Chrome's padding behaviour is definitely exactly the same, and as the standards dictate.
In CSS box-sizing handles the box model. By default it's set to the 'normal' but probably incorrect 'content-box'. Support for box-sizing is reasonable across browsers now so you can probably move to 'border-box' but will need to handle it differently in IE6/7 (if you support them).
AFAIK Safari (webkit) should respect this.
This is working in Chrome but not in Safari:
background: -webkit-radial-gradient(center, ellipse cover, #fdfdfd, #d3d3d3);
How can I fix it for Safari?
It doesn't even work correctly in Chrome, as it shows a circular gradient, not an elliptical one. It does work correctly in Webkit nightlies.
The reason it doesn't work in Safari is that the syntax hasn't propagated yet to a stable version of Safari. Eventually it will. You need to learn patience my young padawan :)
For now, you may use -webkit-gradient, but always include the -webkit-radial-gradient equivalent after it. And while we're at it, don't forget the other prefixes too (-o-,-moz-,-ms-)
Try using for Safari:
background: -webkit-gradient( radial, <point>, <radius>, <point>, <radius>[, <stop>]* ) <color>;
Examples and more explanation can be found here: http://www.the-art-of-web.com/css/radial-gradients/
If Chrome and Safari are both based on WebKit, does that mean I don't have to test both browsers?
... or are there certain situations where I should explicitly test both Chrome and Safari?
Everything else beside the basic HTML rendering engine is still different. If only basic HTML/CSS compatibility is important, I guess it's fine to test one browser.
However, the JavaScript engines of Chrome and Safari are completely different, vector graphics are rendered by different engines, HTML5/video tag stuff is implemented completely different, etc. The list goes on.
Overall I'd recommend to test with both browsers.
You should test both browsers to be sure. You'll be ok 99% of the time but you want to make sure.
I've finished a site but it doesn't work well on Safari.
I used (don't blame me!) frames and two white weird spaces appeared on the left ant the right of the frame "body"
you can se the result here:
http://www.yves-ratheau.com/
I didn't find any help on google, forums, etc...
thanks to any suggestion
Since I'm installing windows on my main Mac, I grabbed a really old laptop (Powerbook g3/safari4.04 on OS X 10.4.11) to test this and didn't get any white lines anywhere. What safari version are you using to test?
You may need to set some CSS padding/margin/border styles to "none" to have it work in older versions of Safari, but I've never seen this problem before.