0

I am using webflow and embedded a custom HTML SVG animation into the background of the page. Works great in everything but internet explorer 11. How can I fix this so that it works across all browsers?

I tried putting some CSS code into the page to detect if it was in internet explorer 11, but I am not very familiar with CSS and it just made the waves disappear.

https://proj-24e99d.webflow.io/

Ratan Uday Kumar
  • 5,738
  • 6
  • 35
  • 54
Nicholas Ridpath
  • 3
  • 1
  • 2

2 Answers2

0

As far as i know IE 10 and 11 only support animation with programmatic scripting. Hope the below links below understand more. https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg193979(v=vs.85)

jo7
  • 1
  • 1
  • Okay I think I understand. Would there be a way to detect if a user is using IE 10 or IE 11 so that it could display the animation as a single image that covers the page, but otherwise use the wave animation? – Nicholas Ridpath Jun 24 '19 at 21:39
0

Would there be a way to detect if a user is using IE 10 or IE 11 so that it could display the animation as a single image that covers the page, but otherwise use the wave animation?

You could use the following code to detect the browser version:

<style type="text/css">
    body {
        font: 1.25em sans-serif;
        background-color:palegreen;

    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        body{
            background-color:aqua;
        }
    }
</style>

More details, please check this thread.

Besides, about the SVG animation, as a workaround, I think you could try to use a .GIF file to display the animation (the wave), set it as the background image.

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30