Google Chrome Rendering Issue? - .png sprite sheet sometimes disappears from web page

126 views Asked by At

It is rare it happens and has been a bug for us on the last few versions of chrome it seems... is that the sprite icons from a .png file on our internal web application sometimes disappear after launching an external link in a new tab and then coming back to the internal application web browser tab.

It is frustrating for our application users because they don't know where all the icons have suddenly gone and that they have to refresh their browser tab to fix the rendering issue.

Has anyone else ever seen this before with sprite icons on their web site or web application in chrome?

Fixes we have tried; but have not worked well. We have split a very large .png sprite sheet into 6 smaller sprite sheets which are only 1000px wide and 600 pixels tall and when the bug does happen again, (which we really can't replicate at all, just pot luck) instead of all the sprites not rendering suddenly, only sprite icons from sprite sheets 4 and 5 out of the 6 total sprite sheets have stopped rendering on the screen...

The sprite sheet method we have tried has worked for us on chrome for over 15 years in general but only in the last 6 months or so has this been an issue.

Alternative solution would probably be for us to try remaking all of our icons as SVG files, but we have a lot of sprites to remake and would be a laborious task!

2

There are 2 answers

1
DevMan2012 On

What you need to do is re-save the .png file from photoshop with no alpha channel and it will always render on chrome correctly.

0
James D On

Trying out using .webp image format for sprite sheets instead as only IE isn't supported, but that is not a problem for us. If after trying out this new image format and we don't see the rendering issue after several months I'll mark this as an answer.