Flip Animation - CSS - Mobile Browsers - css

I created a Fiddle:
https://jsfiddle.net/6zkmg2cn/
I tried to add code but it wouldn't show the HTML from the fiddle?
This fiddle works fine on a PC, but the same fiddle on a mobile browser doesn't work.
As you will see, it just flips the "front" 180 degrees but never shows the "back"
any idea what I'm doing wrong?
or does anyone know a better way to use a "flipper" animation that works on mobile devices? I just want a basic "click this and it flips" animation.
EDIT:
I'm sorry, I should have added more information:
It turns out it does work on Android Chrome and Firefox, but where I am seeing it not work is iOS Chrome (56.0.2924.79) and iOS Safari (10.1.1 iOS) and iOS FireFox (6.1)
Obviously this is something I'm missing with a -webkit flag in CSS or something? The link in the comments that show what's its compatible with suggests it should be working with these browsers, so leads me to believe its my code. Sorry again.

it was:
-webkit-backface-visibility: hidden;
that I needed to add.
Thank you guys, your comments helped me to find this answer. I appreciate it.

Related

Anyone know why my Chrome browser's background-color acts up like this?

I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.

CSS animation not working when classname is applied in Safari

If you view this codepen demo in Chrome and scrolldown you should see a piechart animation kick in when it comes into view. Yet in Safari Version 7.0.2 (9537.74.9) it doesn't. Any ideas why this isn't working in Safari?
http://codepen.io/s10wen/pen/czDbu
This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em. That line doesn't appear to be necessary, everything works fine without it.
This example doesn't have the bug: http://codepen.io/anon/pen/ktKmu.
I discovered this by removing bits of CSS & JavaScript until the bug no longer happened, revealing the single line that was causing it. Reduction ftw!

Why is Jquery not being loaded correctly?

I am so aggravated, and have spent hours trying to solve this compatibility issue. If anyone can help it would be very, very appreciated.
I am using Jdock to display a navigation at http://cailinshea.com/ - which works fine in Safari, Chrome, Firefox, and IE9 - but does not work in IE8.
I would really like to avoid having to create a second navigation for IE8, is there some way to get my navigation to work in IE8?
I think I resolved this by doing CSS browser testing and loading different styles accordingly.

I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

I'm a beginner that just built a menu bar that changes the color of the webpage. It works perfectly in Chrome, Firefox, Opera, and IE. However, in Safari the 1st, 2nd, and 4th options are one pixel off when you hover over them. I was wondering how to fix this without messing up how the bar works in Chrome (because they both use Webkit right?).
This is the code for the webpage:
http://codepad.org/YrKz8Auy
And this is the code for the CSS:
http://codepad.org/pGnL5E5M
Any help or insight would be greatly appreciated!
You have a really complicated structure. Here's what your code could look like when simplified: http://jsfiddle.net/hCmrY/2/
Let me know if there are any Safari issues with it.

css rollover buttons- great in safari,and firefox/ ie but not chrome?

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.

Resources