Im using the css property myanim2, and it is working fine in browsers like chrome and firefox.But it is not working in ie.
It is working in chrome and firefox with the below css hack.
-moz-animation: myanim2 2s infinite; -webkit-animation: myanim2 2s infinite
May I know how we can make this work in ie also.
Thanks,
Balaji.
Generally for IE9 you would use the -ms-filter prefix for any CSS3 property. However, Ie9 does not support the CSS3 animation property.
So this animation(myanim2) will not show up in Ie9
Related
In sencha Extjs 6.5.3 and 7.0.2 Modern the painted event is not triggered for all components and containers, please find the below fiddle which increment when clicked from Android,windows and even on Mac Safari, but not incrementing on iOS WKWebView (custom) and safari.
Is there any way to manually fire the painted event based on DOM Events or any alternative to the painted event? It was working on below 13.4 (iOS).
Please find this Sencha Fiddle Sample
Not working in ios 13.5.1
Working fine in Desktop chrome and Android devices..
Add this style fix to app.scss. Thanks to Sencha Support.
.x-paint-monitor.cssanimation {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Now working fine.
This alone did not work for us.
Add this style fix to app.scss. Thanks to Sencha Support.
.x-paint-monitor.cssanimation {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Now working fine.
We had issues in all webkit browsers (Chrome, Edge, Brave, Android webview,...).
The fix: increase the animation duration from 0.0001ms to al least 0.001ms (we set it to 0.01ms).
.x-paint-monitor.cssanimation {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.01ms;
animation-duration: 0.01ms;
}
This problem seems to be fixed in Safari 14 (iOS and Mac).
Your test Fiddle is green on my iPhone and Mac with version 14.
I have this weird issue happening only in safari ios:
As you can see from the gif above (click on it to see it properly), the div is not moving unless I click on it in developer tools. I'm not changing any code and the div starts functioning correctly.
Anyone have any ideas why this is happening on ios (not happening on desktop safari)?
I'm using transition: margin-left 500ms ease; on body and then change margin of the div (I keep the vendor prefix -webkit-).
Thanks!
I've experienced a similar issue and it appears to be due to how Safari deals with jQuery animations.
A workaround rather than a fix, but if you use jQuery.css() rather than jQuery.animation(), the issue shouldn't occur. You can then use css animations instead. You could probably use css classes to set the margin-left and just add/remove a class using jQuery on click too.
Cheers
Matt
I have some objects in an animation which are continously animating in a rotation back and forth using css3. To do this I have created a declaration like so:
#-webkit-keyframes wiggle {
0% {-webkit-transform:rotate(12deg);}
50% {-webkit-transform:rotate(-6deg);}
100% {-webkit-transform:rotate(12deg);}
}
And each object I want to use this for I do the following:
.p4, .p5, .p6 {
-webkit-animation-name: wiggle;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
}
Since I want some random between each of the objects I have the following altering animation durations:
.p4 {
-webkit-animation-duration: 5s;
}
.p5 {
-webkit-animation-duration: 7s;
}
.p6 {
-webkit-animation-duration: 8s;
}
And so on...
This works ok - (only testing in Chrome so far). But it doesn't seem to be very optimal.
I would like to know whether there is a faster way to achieve this. Or a leaner way. I believe I could perform this with JS but I'm not sure what is going to be more lightweight on the end users resources.
Is there a better way to achieve this sort of basic animation with less resources - and if so, how?
In addition to this, if I were to create this same animation using jquery for example, how could I actually test the memory usage required? I found something recently to test memory usage of tabs but it appears the results are inconsistent. ie sometimes 1 tab is using more memory than the other and vice versa even though the code remains the same.
Thanks for any pointers.
Stick with the CSS3 animations if they work as intended, and if needed do something in JS as a fallback for non supporting browsers.
Replacing the CSS3 with JS is not really leaner or less resource intensive, quite the opposite as CSS3 seems to have smoother animations and in some browsers will use hardware accelaration and the GPU, something not possible with JS (at least not easily).
All in all you'll end up writing more in JS, and perhaps use a library or plugin for rotating animations as well. It will be less smooth in most browsers, and use more resources as well as JS will have to set the css tranform values several times each second for a somewhat smooth animation.
I'm using Nirvana Tikku's Jquery Radial Menu Plugin on this page.
The animation works very nicely in IE9, FF, and Chrome. It doesn't work, however, in IE8 or Safari (5). Making matters more challenging, each of these browsers malfunctions in a different way. (Of course, that's not all that surprising.)
In IE8, the curved trapezoids aren't positioning themselves properly by default. Otherwise, the animation works just fine. This leads me to believe the issue has its roots in some quirky, IE8 CSS issue.
Safari, on the other hand, cannot seem to process the Jquery function properly. The menu displays properly initially. However, each click sends the trapezoids scattering.
Only the "keystone" trapezoid displays properly at all times.
I've posted some screenshots here, in case they're helpful: http://dl.dropbox.com/u/9534659/screenshots.zip
Any tips would be most appreciated.
UPDATE (1/25/12)
I have the animation working on all browsers save the Windows version of FF and IE8. (It works fine in the Mac version of FF.)
Any additional suggestions would be most appreciated.
Try to add it to the class .radial_div_item in css this: -webkit-transition:all .1s ease-in-out;
I need to rotate png images (some circle disks). It is done with some help of jQuery:
$.fn.rleft = function() {
return this.animate({
rotate: '-=45deg'
});
};
In all versions of IE < 9 things go terribly wrong. Rotation animation is crappy, and there is happening something very ugly with alpha transparency of those images, after they have been rotated.
Is it possible to make this work in IE 8 and 7 (and, more or less IE 6?). If not, I will be forced to order it to be done in Flash. But I would like first to try to do it using just css and javascript (svg?). Do you have any tips, for using different technology, or js library?
Thank you in advance for any answers.
EDIT: I actually didn't find solution for rotating png images in IE using CSS and JS. That said, everything was redone using Raphaël, which works very nice even in IE 6.
EDIT2: End result done with Raphael: http://ipm-profil.de/diversity/
I used GIF images, and masked "rough edges" of those circles with SVG (Raphael code).
I would highly recommend using the Raphaël—JavaScript Library for this. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ and is very easy to use, and works well with JQuery.
IF you don't care if older browsers can view it IE 9 has add the transform property :
-webkit-transform: rotate(15deg) /* for Safari/Chrome */
-moz-transform: rotate(15deg) /* for Firfox */
-ms-transform: rotate(15deg) /* for hated IE */
transform: rotate(15deg) /* The way it should be. */
And I found a good JS at
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html the JS is at the bottom of the post.
It might be worth doing it in SVG. It will work as is in all browsers including IE9. For IE < 9, you can use SVGWeb. Its a Flash shim to make SVG work in browsers that do not support it.