CODEWITHSUNDEEP
imageinternet-explorerbackgroundpnginternet-explorer-10
Kevin Dark
Kevin Dark

Reputation: 476

IE 10 & PNG Files As Background Image

We have a sprite of many icons which is 10564px x 80px. The icons are arranged horizontally.

In every other browser except IE10 the icons/images show up when being used as background images for tags with specific CSS to apply the relevant position.

When viewed in IE10 they do not show up at all and actually when you try to view the png file directly from the URL in IE10 it doesn't show either.

Any ideas?

Upvotes: 2

Views: 1297

Answers (2)

DSehgal
DSehgal

Reputation: 1

The fixes is only to separate the each individual image as single with minimum size, which will be less than 8000px wide;

Upvotes: 0

Kevin Dark
Kevin Dark

Reputation: 476

After extensive testing, it turns out it's a limitation on the width of the PNG canvas and IE10.

PNG images would work and can be viewed right up until 8000px wide but no more than that, after that they just don't render.

After more testing it's related to whether or not they are transparent. PNGs with transparency just don't show at all whereas images without transparency show as a black block (canvas).

Whether or not MS will fix this remains to be seen... we live in hope!

The fix for us is to reduce the width of our sprite to 8000px and have two or more rows of icons/images well spaced out.

Upvotes: 2

Related Questions