I'm creating 3D flip cards with CSS3.
In Google Chrome it does exactly what it should do, but Safari seems to have some problems with the z-index.
Safari behavior (wrong): http://i.stack.imgur.com/z4O9N.png
Chrome behavior (correct): http://i.stack.imgur.com/EX2Jw.png
Example demo: http://jsfiddle.net/Widmore/XJFAy/7/
Anyone familiar with this issue?
Thanks!
Related
The Browser Safari falls under Webkit or not? Please do clarify my doubt at the earliest. If it is not falls under the category of Webkit, what steps would I take to write in CSS. I mean the syntax of CSS for Safari Browser Like -moz for Filezilla and -webkit for Chrome?
Safari is webkit based. In fact safari was the first browser to use webkit and the open source it. The -webkit should work.
You can read more here:
http://en.wikipedia.org/wiki/Safari_(web_browser)
http://www.webkit.org/
I have created a simple CSS flip animation which works in other major browsers, seems to be not working in IE 9.0 or 1.0 for some reasons.
jsbin handler.
http://jsbin.com/IQUqUBe/1/
Below is the links which i have looked upon.
https://github.com/vinothbabu/3DFlipper
http://davidwalsh.name/demo/css-flip.php
I am not able to figure out where is the issue whether its z-index or any other property which is causing this issue and also can you guys suggest on how to debug CSS code if possible.
When it comes to debuging CSS code you can use developer tools.
For Firefox the best solution would be Firebug
for Chrome, developer tools are built-in. Simply press F12
for IE there is Internet Explorer Developer Toolbar
Its not that it does not work in IE 10. set a doctype at the top: <!DOCTYPE html> This will take IE out of quirks mode. Below is the fiddle for the same.
http://jsbin.com/IQUqUBe/3/edit
This should make the code to work in IE.
I don't know what the problem is specifically, but here is a link saying that transition does not work in IE9: http://caniuse.com/#search=transition
If you go in the "issues" tab, you'll see that it doesn't work on any pseudo-elements beside :before and :after for IE10 (and others).
EDIT: As pointed out in the comments, :hover is a pseudo class, and the link doesn't say that it doesn't work for IE10. I still don't know why it doesn't work.
Have you tried removing the -ms- prefix ? Apparently IE10 supports the transition without prefix.
I have built an intro animation using jquery. This looks fine on my machine in all browsers (ff, chrome and safari).
On the clients however, it does not!
Clients screen shot:
http://madmantis.co.uk/debug/screen-shot-client.png
My screen shot:
http://madmantis.co.uk/debug/screen-shot-vs.png
I just cant figure out what is going on here....perhaps something to do with line wrapping in css?
I am on safari 6, he is on safari 5. He reports the same problem in chrome, again I dont see the error.
The website is available at http://dev.system2.co.uk
Thanks for any help
It seems like there has been some changes in the default font rendering method in Safari 6. Here's a little CSS that might work for you:
html {-webkit-font-smoothing: antialiased}
Taken from this topic: Font render safari 6
im having trouble with my css displaying correctly in both Chrome and Safari.
Because they are both webkit browsers i cant understand why.
My css positioning and div size displays perfectly in both FireFox and Safari but is all out of wak in chrome.
I have tried css reset but nothing seems to be working. Any ideas?
The website is here
www.girlsskateaustralia.com
Has anybody else encountered this. Whenever the images are intially loaded by the browser it only shows the last-half of the image. Then when I mouse over anywhere in the green section it immediately displays the rest of the image.
What you're seeing here is a <div> with a background-image and a <img> located within said <div>.
I'm encountering this issue using Safari 3.2.3 for Windows and my colleagues have seen this using the Mac version. None of the other browsers I have tested this in seem to show the same bug. I've tested in IE8, IE7, IE6, FF3, Chrome, and Opera.
Let me know if you've heard of any fixes. Thanks.
Safari Image Bug http://www.pixelwhiskey.com/images/safari_image_bug.jpg
Try using PNGs instead if GIFS
I've seen issues similar to this with IE rendering solved by setting height: 1% to the affected div or to an element nested within it. I've never seen it in Safari though.
Inspect all of the elements near the image in Firebug (yes, I know the problem is in Safari) and make sure none of them has the wrong size for any reason, and none of them has excessive padding that encroaches the image you're not seeing correctly. Also, try setting overflow: visible; on the style for various elements in the vicinity; I've seen mouseover flickers in the past, but nothing that couldn't be overcome with CSS.