0

I am using a wordpress site with Visual Composer installed. I have been asked to remove all css animations on I.E 10+ and Edge, however everything I have tried so far hasn't worked, including using browser hacks targeting only I.E & Edge.

Does anyone have an idea of how to achieve this in CSS or JS?

Max
  • 109
  • 1
  • 1
  • 7
  • Possible duplicate of [What is the cleanest way to disable CSS transition effects temporarily?](http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily) – APAD1 Mar 13 '17 at 16:50
  • If you have a list of all the animated classes, you could add a custon css file after all other css with the `!important` rule, so you can overwrite each animated element. – Shilly Mar 13 '17 at 16:50

1 Answers1

0

Use JS to detect the user agent string of the brower to detect if the user if on IE or Edge.

function isMicrosoft(){
    var agent = window.navigator.userAgent;

    var msie = agent.indexOf('MSIE ') 
    var msie11 = agent.indexOf('Trident/');
    var edge = agent .indexOf('Edge/');

    if(msie > 0 || msie11 > 0 || edge > 0) return true;
    else return false;
}

Then add a class to the <body> element if the user is using one of these browsers.

if(isMicrosoft()){
    document.body.classList.add('has-ms');
}

Then in the CSS you can target the .has-ms class to disable any CSS animations

.has-ms .animated-item {
   animation: none; 
}
Jackson
  • 3,476
  • 1
  • 19
  • 29