Progressive images in CSS resources (as background-image)

UNCONFIRMED
Unassigned

Status

()

Core
ImageLib
P3
normal
UNCONFIRMED
2 years ago
5 months ago

People

(Reporter: Vincent MONIER, Unassigned)

Tracking

42 Branch
Unspecified
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [gfx-noted])

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20151029151421

Steps to reproduce:

Use a (heavy) progressive image (ie JPG) as a CSS background:

<code>
* {
background-image: url('heavy-progressive.jpg'), black;
}
</code>


Actual results:

Firefox renders a black background while the resource is downloaded, and shows the complete image once it has been downloaded. Webkit does such rendering.

Complementary informations can be read in a StackOverflow post ( http://stackoverflow.com/questions/21849736/progressive-jpg-background-image-trouble-in-firefox/21853084#21853084 ).


Expected results:

Firefox should progressively render the image in the background of the element as the image is downloaded, so the black background appears for a very short time (only while the first layer of the progressive image is downloaded). Once first layer of the progressive image is downloaded, it should be rendered in the background.

This will increase user experience in many websites that are using such progressive image backgrounds.

Updated

2 years ago
Component: Untriaged → ImageLib
Product: Firefox → Core
Sounds like the progressive load works with <img>, but not with CSS background-image.
OS: Unspecified → All
Whiteboard: [gfx-noted]
Priority: -- → P3
You need to log in before you can comment on or make changes to this bug.