Closed Bug 1231622 Opened 8 years ago Closed 2 years ago

Progressive images in CSS resources (as background-image)

Categories

(Core :: Graphics: ImageLib, defect, P3)

42 Branch
Unspecified
All
defect

Tracking

()

RESOLVED FIXED
102 Branch
Performance Impact low
Tracking Status
firefox102 --- fixed

People

(Reporter: dev.coding, Assigned: tnikkel)

References

(Regressed 1 open bug)

Details

(Keywords: perf:pageload, Whiteboard: [gfx-noted])

Attachments

(1 file)

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.
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]

Testcase from this stackoverflow question: https://sample.easwee.net/jpgProgressive/

Alternative testcases:

as <img>: http://wfmh.org.pl/thorgal/wtc-photo-small.jpg (from bug 76776)
as background: data:text/html,<div style="background:url(http://wfmh.org.pl/thorgal/wtc-photo-small.jpg) no-repeat; height: 400px;">

Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [gfx-noted] → [gfx-noted][qf]
Whiteboard: [gfx-noted][qf] → [gfx-noted][qf:p3:pageload]
Assignee: nobody → tnikkel
Performance Impact: --- → P3
Keywords: perf:pageload
Whiteboard: [gfx-noted][qf:p3:pageload] → [gfx-noted]
Attachment #9248356 - Attachment description: WIP: Bug 1231622. Allow drawing CSS images that don't have a complete frame. → Bug 1231622. Allow drawing CSS images that don't have a complete frame. r?miko,aosmond
Pushed by tnikkel@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/846e7307e1a3
Allow drawing CSS images that don't have a complete frame. r=aosmond
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 102 Branch
Blocks: 1769935
Blocks: 1770920
See Also: → 1773020
Blocks: 1773023
Blocks: 1775237
Regressions: 1808149
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: