WEBFLOW HTML/CSS trouble with putting image into internet explorer only

Nicholas_Ridpath · July 5, 2019, 9:51pm

I’ve been trying to get an svg animation to only show up in browsers that are not ie 10/11 since it does not show up how I want it to. I was helped with some code that detects the browser, but now i need help putting the svg animation into the code and also putting an image into the only ie 10/11 part of the code.

I’ve tried copy pasting the svg animation into it but when I do that nothing shows up on ie or chrome. the top part of the code is the animation and the bottom part is the part that detects the browser.

<div> <svg id="isi-wave" xmlns="http://www.w3.org/2000/svg" viewBox="519 0 2022 1225.25"> <g id="wave"> <path d="M5983.25,234v991.28H0V233.7c8.66.74,17.26,1.13,26,1.52l.23.18C209.57,244,520.63,39,785.09,39c242.62,0,530.06,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C1705.39,244,2016.44,39,2280.9,39c242.62,0,530.06,179.27,710.72,195v-.27c8.67.74,17.26,1.13,26,1.52l.23.18C3201.2,244,3512.26,39,3776.71,39c242.62,0,530.07,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C4697,244,5008.07,39,5272.53,39,5515.15,39,5802.6,218.26,5983.25,234Z" fill="#00a6dd"/> <path d="M5983.25,187.32v51C5707.9,230.8,5516.38,86.11,5214.88,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.14.56-21.88.69-26,.62v0c-275.35-7.47-466.86-152.16-768.37-152.16-237.07,0-397.66,115.57-615.17,145-9.25,1.23-18.57,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35h-.23c-30.13.56-21.88.69-25.95.62v0c-275.35-7.47-466.87-152.16-768.37-152.16-237.07,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.13.56-21.88.69-26,.62C1220.45,230.8,1028.94,86.11,727.44,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35H26c-30.14.56-21.89.69-26,.62v-51c35.7,6.16,50.4,9.7,110.6,9.7C276.1,197,592.14,0,841.93,0c218.51,0,473.38,146.92,653.88,187.32,35.7,6.16,50.4,9.7,110.6,9.7C1771.91,197,2088,0,2337.74,0c218.51,0,473.38,146.92,653.88,187.32h0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.32-197,218.52,0,473.38,146.92,653.88,187.32v0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.33-197C5547.88,0,5802.75,146.92,5983.25,187.32Z" fill="#0045ab"/> </g> <g id="bubbles"> <circle id="bubble_1" data-name="bubble 1" cx="707.51" cy="109.89" r="70.69" fill="#fff" opacity="0.57"/> <circle id="bubble_2" data-name="bubble 2" cx="906.53" cy="83.33" r="49.13" fill="#fff" opacity="0.4"/> <circle id="bubble_3" data-name="bubble 3" cx="1267.49" cy="128.73" r="101.27" fill="#fff" opacity="0.35"/> <circle id="bubble_4" data-name="bubble 4" cx="1528.18" cy="88.09" r="61.16" fill="#fff" opacity="0.65"/> <circle id="bubble_5" data-name="bubble 5" cx="1892.64" cy="175.38" r="128.84" fill="#fff" opacity="0.52"/> <circle id="bubble_6" data-name="bubble 6" cx="2081.9" cy="83.86" r="44.87" fill="#fff" opacity="0.56"/> <circle id="bubble_7" data-name="bubble 7" cx="2339.83" cy="103.63" r="76.7" fill="#fff" opacity="0.7"/> </g> <style> #isi-wave #wave { -webkit-animation: moveWave 4s linear 0s infinite; animation: moveWave 4s linear 0s infinite; } #isi-wave #bubble_1 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -1.8s infinite alternate; animation: moveIn 2s ease-in-out -1.8s infinite alternate; } #isi-wave #bubble_2 { -webkit-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); transform: translate(0px, 200px); -webkit-animation: moveIn 2s ease-in-out -2.28s infinite alternate; animation: moveIn 2s ease-in-out -2.28s infinite alternate; } #isi-wave #bubble_3 { -webkit-transform: translate(0px, 230px); -ms-transform: translate(0px, 230px); transform: translate(0px, 230px); -webkit-animation: moveIn 2s ease-in-out -3.2s infinite alternate; animation: moveIn 2s ease-in-out -3.2s infinite alternate; } #isi-wave #bubble_4 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -3.8s infinite alternate; animation: moveIn 2s ease-in-out -3.8s infinite alternate; } #isi-wave #bubble_5 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -0.92s infinite alternate; animation: moveIn 2s ease-in-out -0.92s infinite alternate; } #isi-wave #bubble_6 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -1.32s infinite alternate; animation: moveIn 2s ease-in-out -1.32s infinite alternate; } #isi-wave #bubble_7 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -2.04s infinite alternate; animation: moveIn 2s ease-in-out -2.04s infinite alternate; } @-webkit-keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } @keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } </svg> 
  

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

    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        body{
            background-color:blue;
            <img alt="" src="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png" 
            srcset="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-500.png 500w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-800.png 800w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1080.png 1080w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1600.png 1600w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png 1920w" 
            sizes=(max-width: 1920px) 100vw, 1920px" />
        }
    }
</style>

I expected the png image to at least show up I think I put it in right, but nothing is showing. I am not familiar with html/css which is why I was doing this in webflow.

webdev · July 8, 2019, 7:44pm

Hi @Nicholas_Ridpath, welcome to the forums.

Your first post goals are not trivial. First let me point out that you can’t include HTML inside of CSS. So your block below will not work.

 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /* IE10+ specific styles go here */
        body{
            background-color:blue;
/* bad code below is HTML, that would need to be inside the HTML body. */
            <img alt="" src="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png" 
            srcset="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-500.png 500w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-800.png 800w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1080.png 1080w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1600.png 1600w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png 1920w" 
            sizes=(max-width: 1920px) 100vw, 1920px" />
        }
    }

Next, what you really want to do here is feature detection so that browsers that don’t support web animations (<=IE 11) wont load the SVG and instead will load your PNG file.

Fortunately there is an easy to use JavaScript library called modernizr.

It tests for the support of features. When added to your site page custom code (Head before Body) it will run and when a user visits the page, it will add classes to the HTML element. We can use these classes to display and hide elements.

In this case, you only need to test for a couple of items. Here is the code to just do that.

/*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-animation-cssanimations-smil-setclasses !*/
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,s,i,a;for(var l in w)if(w.hasOwnProperty(l)){if(e=[],n=w[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,s=0;s<e.length;s++)i=e[s],a=i.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),C.push((o?"":"no-")+a.join("-"))}}function s(e){var n=_.className,t=Modernizr._config.classPrefix||"";if(b&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),b?_.className.baseVal=n:_.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):b?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(e,n){return function(){return e.apply(n,arguments)}}function l(e,n,t){var o;for(var s in e)if(e[s]in n)return t===!1?e[s]:(o=n[e[s]],r(o,"function")?a(o,t||n):o);return!1}function u(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function f(e,n){return!!~(""+e).indexOf(n)}function c(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(n,t,r){var o;if("getComputedStyle"in e){o=getComputedStyle.call(e,n,t);var s=e.console;if(null!==o)r&&(o=o.getPropertyValue(r));else if(s){var i=s.error?"error":"log";s[i].call(s,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else o=!t&&n.currentStyle&&n.currentStyle[r];return o}function p(){var e=n.body;return e||(e=i(b?"svg":"body"),e.fake=!0),e}function m(e,t,r,o){var s,a,l,u,f="modernizr",c=i("div"),d=p();if(parseInt(r,10))for(;r--;)l=i("div"),l.id=o?o[r]:f+(r+1),c.appendChild(l);return s=i("style"),s.type="text/css",s.id="s"+f,(d.fake?d:c).appendChild(s),d.appendChild(c),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(n.createTextNode(e)),c.id=f,d.fake&&(d.style.background="",d.style.overflow="hidden",u=_.style.overflow,_.style.overflow="hidden",_.appendChild(d)),a=t(c,e),d.fake?(d.parentNode.removeChild(d),_.style.overflow=u,_.offsetHeight):c.parentNode.removeChild(c),!!a}function v(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(c(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];o--;)s.push("("+c(n[o])+":"+r+")");return s=s.join(" or "),m("@supports ("+s+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return t}function g(e,n,o,s){function a(){c&&(delete T.style,delete T.modElem)}if(s=r(s,"undefined")?!1:s,!r(o,"undefined")){var l=v(e,o);if(!r(l,"undefined"))return l}for(var c,d,p,m,g,y=["modernizr","tspan","samp"];!T.style&&y.length;)c=!0,T.modElem=i(y.shift()),T.style=T.modElem.style;for(p=e.length,d=0;p>d;d++)if(m=e[d],g=T.style[m],f(m,"-")&&(m=u(m)),T.style[m]!==t){if(s||r(o,"undefined"))return a(),"pfx"==n?m:!0;try{T.style[m]=o}catch(h){}if(T.style[m]!=g)return a(),"pfx"==n?m:!0}return a(),!1}function y(e,n,t,o,s){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+P.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?g(a,n,o,s):(a=(e+" "+N.join(i+" ")+i).split(" "),l(a,n,t))}function h(e,n,r){return y(e,t,t,n,r)}var C=[],w=[],S={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){w.push({name:e,fn:n,options:t})},addAsyncTest:function(e){w.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=S,Modernizr=new Modernizr;var _=n.documentElement,b="svg"===_.nodeName.toLowerCase();Modernizr.addTest("webanimations","animate"in i("div"));var x={}.toString;Modernizr.addTest("smil",function(){return!!n.createElementNS&&/SVGAnimate/.test(x.call(n.createElementNS("http://www.w3.org/2000/svg","animate")))});var E="Moz O ms Webkit",N=S._config.usePrefixes?E.toLowerCase().split(" "):[];S._domPrefixes=N;var P=S._config.usePrefixes?E.split(" "):[];S._cssomPrefixes=P;var z={elem:i("modernizr")};Modernizr._q.push(function(){delete z.elem});var T={style:z.elem.style};Modernizr._q.unshift(function(){delete T.style}),S.testAllProps=y,S.testAllProps=h,Modernizr.addTest("cssanimations",h("animationName","a",!0)),o(),s(C),delete S.addTest,delete S.addAsyncTest;for(var j=0;j<Modernizr._q.length;j++)Modernizr._q[j]();e.Modernizr=Modernizr}(window,document);

In the comments inside the code (at the top) you can follow that link to download the file or use it to add additional feature detection.

In browsers that don’t support animations, we can hide the SVG (your specific one) by adding a CSS rule.

/* 
* Hides the animated SVG element from the old browsers
*/
.no-webanimations svg#isi-wave{display:none;}

This would be placed inside a block in a custom code .

Now handling the replacement PNG is a little harder for me to explain, since it depends on where you place the element. I don’t see a final design so I have no clue where you were going to put this. I will give it a try.

Lets say you wanted to use image in your design (only for those old browsers). Give the image a class of “waves-img”. We could display this only for those old browsers by using the following CSS.

./* 
* Hides the element from browsers that can render the animations
* and hides it from those that can't. 
  */
.webanimations .waves-img {display:none;}
.no-webanimations .waves-img {display:inline-block;}

To make this easier, I created a codepen.io pen so you (anyone really) can grab the code and play with it.

You happen to catch me when I was in the process of creating a tutorial about handling issues with IE for a client. . So I leveraged some of what I already created. Cheers!

Nicholas_Ridpath · July 8, 2019, 11:26pm

Very helpful! Thank you! I am new to webflow and building websites in general, as you can probably tell.

webdev · July 8, 2019, 11:52pm

You are welcome. You were real close to a solution, I just gave you a more polished way to address it. Fortunately you won’t run into something like this too often as IE use is on the downslope. That being said, IE support on modern websites is always a challenge. This demonstrates a sound way to address that that could be used anywhere you have browser feature issues.

Great first start and welcome to Webflow!