Has anyone ever run into an issue with css animations not firing in IE11 when using animate.css?
It works fine in Chrome, FF, etc.
http://staging.gnosys.com/welldecide/
I thought it may have had something to do with firing animations using owl carousels event handlers but that doesn't appear to be the case.
It also works fine in Edge.
Any insight would be greatly appreciated.
Related
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.
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!
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
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'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.