Slick: svg icons inside slick are not visible in IE11

[soerson]

after slick initialization svg icons inside become invisible in IE11 browser
Other icons outside of slick still be visible.
svg-icon use via <symbol> sprite and include via <use> tag

structure of my document

[jasonujmaalvis]

I'm facing the same problem, when I comment out position: relative on the slide-track the svg displays. Not sure if its a bug with slick or IE11.

Thanks,
Jason

[leggomuhgreggo]

Im on a mac right now, would one of you guys be willing to see if this stackoverflow suggestion works?

Thanks

[soerson]

Doesn't work, i've tried different values of http-equiv="X-UA-Compatible"

[jasonujmaalvis]

I've been debugging the issue and narrowed it down to the inline style for .slide-track, transform. Its doesn't seem to like either transform: translate or translate3d.

If you comment this style out it displays as normal. Obviously this isn't a solution as it requires this to move the carousel.

[leggomuhgreggo]

Interesting. As a workaround you could turn useTrasform to false, which uses left instead of transform

[jasonujmaalvis]

Thanks for the tip, I just tried it however and its not resolved it, maybe its a couple of things causing it not to display very strange

[soerson]

turning off transform didn't change situation.

thanks for your adwices

[quarkus]

I am facing the exact same problem.
Sadly i couldn´t find a reason / fix for this by now ...

http://codepen.io/quarkus/pen/grRjyg

Seems as if IE is just going randomly nuts ..

[brezanac]

SVG images require a viewBox attribute in order to maintain proportions which is essentially the reason why they are not properly displayed in Internet Explorer. Exporting an .svg either through Illustrator or Inkscape makes sure the files contain an appropriately calculated viewBox attribute.

In case Illustrator or Inkscape are not an option there is an excellent article on css-tricks.com explaining how to calculate and add a viewBox attribute.

https://css-tricks.com/scale-svg/

[soerson]

@holodoc when svg-sprite is builded via <symbol> attribute viewBox is set there, and <svg> doesn't require it css-tricks

But I checked your advice on practice. Didn't help, sadly.

I think key is in DOM rebuid and page re-rendering which slick started. Because icons disappear after this

[soerson]

@quarkus I noticed that IE shows your svg correct after second and more reloadings. But when I've cleared cache your svg dessapeared in carousel

And try to rebuild your sprite via <symbol> css-tricks. Using <defs> for this aim is not recomended now as I know

[quarkus]

@ROBsoer: my pen/sprite still uses the non symbol syntax of svgstore .. so i have a viewbox and no symbols. (althoug i have the symbol version in production and i am facing the same issues)
For me the behavoiur was pretty unpredictable .. sometimes the svgs showed up during slide changeing or while dragging but would dissapear once the transition was complete.
I really couldn´t make out why this happens .. the "just transformed" box worked in all occasions ... and i couldn´t force the ie to redraw theses boxes ...

[leggomuhgreggo]

Appreciate the investigative work @quarkus and @ROBsoer. This feels more like a browser issue than an issue with slick, but if I'm missing something or if there are other sliders that handle SVGs better, please holler back and I will happily reopen. Thanks!

[stoykostanchev]

This solved the issue for me:
http://stackoverflow.com/questions/33040911/svg-icons-dissapears-in-windows-10-ie-11-using-jquery-sortable
Basically - seems it's an IE problem, and the fix is refreshing the SVG's href after it has been re-added to the DOM. I hooked to slick's init event and that got the job done.

[leggomuhgreggo]

Thanks @stoykostanchev