Closed soerson closed 8 years ago
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
Im on a mac right now, would one of you guys be willing to see if this stackoverflow suggestion works?
Thanks
Doesn't work, i've tried different values of http-equiv="X-UA-Compatible"
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.
Interesting. As a workaround you could turn useTrasform
to false
, which uses left instead of transform
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
turning off transform didn't change situation.
thanks for your adwices
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 ..
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.
@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
@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
@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 ...
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!
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.
Thanks @stoykostanchev
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>
tagstructure of my document