background-size:contain failed to render in specific condition

UNCONFIRMED
Unassigned

Status

()

Core
ImageLib
UNCONFIRMED
4 years ago
4 years ago

People

(Reporter: yeurus, Unassigned)

Tracking

34 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

set a div element to fills its container size with background:
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-image: url("1px-width.png");
    background-color: #F3E2D3;
    background-size: contain;
 


Actual results:

The background image failed to render(it seem to be depends on its container height).
see in action: http://jsfiddle.net/qhbzf47a/2/



Expected results:

image should be rendered
(Reporter)

Comment 1

4 years ago
updated example: http://jsfiddle.net/qhbzf47a/3/
changes: added new difference way to fill container size(width:100%;height:100%)
(Reporter)

Updated

4 years ago
Component: Layout: View Rendering → ImageLib
Created attachment 8543801 [details]
reporter's testcase, with jsFiddle gunk removed
Created attachment 8543802 [details]
reporter's updated testcase, with jsFiddle gunk removed
Maybe related to bug 762832?

Can the problem be observed with explicit sizes rather than 'contain'?

If so, is the problem related to the background-size shrinking the image width to some small fraction of a pixel?  If so, at what width does the problem start happening?

Or is something else the trigger?
(Reporter)

Comment 5

4 years ago
1.Can the problem be observed with explicit sizes rather than 'contain'?

A: I think can't, it act like webkit when I tried so, I assumed that it acted as standard behaviour if I didt use contain.

2.If so, is the problem related to the background-size shrinking the image width to some small fraction of a pixel?  If so, at what width does the problem start happening?

A: although is not so, I found that it may have connection between image width <-> container height, like 1px width image <-> 500px/7NN~8NNpx container height, 2px width image <-> 300px container height(please reference to my updated example, maybe is more there but sorry I could't test all of them)
You need to log in before you can comment on or make changes to this bug.