asaf.b asaf.b - 7 days ago 7
HTML Question

blank image in firefox version 50

I am displaying blank image with:

src="data:image/jpeg;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="


In all the browsers and in Firefox (until version 50) the blank image use to show the background color which is black.

I've update my FF version to 50 and now I see white color square instead of my black background color.

any ideas?

Answer

When looking at the metadata of your file (which is a GIF and not a jpeg by the way), we can see that the flag Has Alpha is not set.

Latest Firefox might have updated their gif parser and are probably now expecting this flag.

Anyway, here is an other 1x1px transparent gif that will work in all browsers: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAAL‌​AAAAAABAAEAQAICRAEAO‌​w=="

body{
   background-color: ivory;
  }
div{
  width: 100vw;
  height: 100vh;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==);
  }
<div></div>

Comments