.ffavicon in Firefox 65+

The problem occurs in Firefox for Linux. I guess it's the same in Windows and MacOs.

In Firefox 65 (cur. Developer) and 66 (cur. Nightly) the folder icon (.ffavicon) is displayed improperly. Curiously there (and only there) is a 3D inset-border around the icon:

A possible workaround is to set the frame to zero size and stretch the background-image to 16px.

.ffavicon {
  display: inline-block;
  width: 0;
  height: 0;
  padding: 8px;
  vertical-align: text-bottom;
  background-image: url("/icons/folder.png");
}

[aaFn]

Hello @WernerFP , thank you and strange. And you say this is starting to appear with FF65 ?
Ok I'll get it and have look at it.

Note: folder.png is one of the favicons having transparency, there might be something inherited on the HTML object with FF65 that would need to be removed .. Hopefully the Inspector will allow me to find that faulty attribute ..

[aaFn]

Hello @WernerFP, well I checked, but FF65 seems completely broken.
Sometimes it displays web pages correctly and sometimes it does strange things like this one:

On the same computer with FF64, all is right.
Obviously something is wrong with the betas ...

[aaFn]

Anyway, looking at the inspector in the debugger, I can't find anything in the CSS provoking that effect.
It happens whatever the .png image, and only for that class, which is not different in its contents from .nofavicon ... except the image of course, but changing the image urls or contents to be the same do not change anything to the "effect".

I suggest filing a bug on bugzilla ...

[aaFn]

By the way, if that can help I can determine that the problem happens only when there is an img with a CSS background-image displayed
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
with no "src=" attribute set on the img element.

When this is the case, it appears that two CSS box-shadow: inset properties are added on the background (one with 2 positive numbers, and one with 2 negative):
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

I couldn't remove them with a box-shadow: unset; even with !important ...

As soon as a src="..." attribute is specified on the img the effect either disappears, or is hidden with the image, since per the explained rules, this is content above inset above background ... I will try with a transparent image to see if the insets are still there below ...

[aaFn]

Result is that with a transparent image, the insets are not showing at all ...

It might be that FF65+ does not like img elements without any src="..." attribute anymore.
Let me know what you think ...

I think you're right. The absent scr attribute is interpreted differently: fficon_without-scr.html

Result: FF 64 | FF 65/66 | Chromium/Chrome

In my opinion it is OK to use an img element as placeholder for a CSS background-image (without stretching to 16px). A div container would probably be the cleaner method. The result is the same for both: fficon_img-versus-div.html

[aaFn]

Very good .. thanks for the suggestion, I take it :-)

As a matter of fact, I must use img elements with the src= attribute for all fetched URI's, because this is the only reliable way to really find the size of fetched image URI's, after loading them (img.onload event) ..) and then to start a conversion process to 16x16 for space saving and speed of display.

However, for the case of folders, and also for the special one of "no favicon" favicon when the Disable favicon fetching.. option is set, I do not need any conversion since I am using an internal PNG file which is as I need to be.

When creating objects for display, I am using "templates" with the Node.cloneNode() method https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode to speed things up.
In the case of folders and nofavicon, I simply copied the code I am using for the other cases without much thinking about it ... but no need to use img there .. so changing it for div as you say, and this works everywhere (and I agree it is cleaner, I do not need all the img stuff at all for all these objects).

Will be in 2.0.52 .. thank you again

[aaFn]

Ok, FF65 is out tonight .. so I just released 2.0.52 ... let me know if all is ok on your side. It appears to be on mine.

Thank you, aaFn.

Everything's fine.
Just in time with the rolling out of FF65, that's perfect!

[aaFn]

:-)

Thanks again for the heads up, and for the suggestion.
Closing the issue now.