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/
Related
It's the first time that I meet such a problem with transitions.
None of them is working on Safari, although they work perfectly fine in firefox and chrome.
http://www.custom-design.ch/_stack/predentec/
I used compass transition mixins, as I always do, so there really shouldn't any problem.
Do you have any idea or track to follow?
Thank you in advance for your help!
Hum, I found the source of the problem, where it absolutely wasn't expected.
This was due to the new version of livereload (2.3.27), that makes apparently different results while exporting CSS code.
I then downgraded to v.2.3.20, and everything was ok, as it has always been!
I wrote to the support of both Livereload and compass to see where the problem comes, but without any answer for now.
when testing my website using Opera Mobile, I discovered some serious problems which I've no idea why they happen and how to fix them.
Here's a comparison between FF (Windows) and Opera Mobile (FF renders as expected):
Here's the jsfiddle with the source
Here are the differences:
1st image looks weird.
4th image disappeared.
Images has partially/missing border-radius.
box-shadow is missing.
I'm pretty sure that the box-shadow and border-radius are the main cause for the problems, because when removing them everything looks fine.
I would like to know why it occur and how to fix it....
Thank you very much!
When you are removing opacity does it work better? It seems there is a very unfortunate bug mixing box-shadow and opacity. And it is tracked by CORE-39908 at Opera. I will add your example jsfiddle example to the bug report.
I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.
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.