Closed
Bug 844874
Opened 12 years ago
Closed 12 years ago
Draw issue on CSS background-image when dynamically loaded
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 844750
People
(Reporter: robin.ebers, Assigned: mattwoodrow)
References
Details
(Keywords: regression, testcase)
Attachments
(4 files)
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
Steps to reproduce:
Hey guys,
we recently discovered that the latest Firefox version (19) has a bug that is not painting images correctly when the content is created dynamically (in our case e.g., a JSON is retched by AJAX, which is then used in a underscore Javascript template).
The templates contains a inline-style like:
<td style="background-image: url(http://a.cdn.net/path/to/image.png)">...</td>
Actual results:
When I make a full refresh, everything is loaded instantly and looks fine. However, if the content area is cleared and new content is created (in exactly the same way as on a clean refresh, except that the page is not reloaded - so AJAX > JSON > _.underscore), then the pictures are not immediately visible. Sometimes it takes up to 10-12 seconds for them to display.
This ONLY occurs in Firefox 19 and 20b1
Live Example:
https://www.racebets.com/en/horse-betting-online/race/details/id/808582/
Clean refresh, all good.
But change the races once loaded, and the silks are not painted.
If you resize the window, change some CSS style or scroll up and down, the silks are painted immediately - so I suspect it is a draw/paint issue.
Happens ONLY in Firefox 19 and 20b1 and was reproduced on 5 individual Windows 7 computers.
Expected results:
The images should be loaded immediately.
Could you attach a minimal testcase (HTML file e.g. or online testcase)? It would help to debug.
Component: Untriaged → Layout
Flags: needinfo?(robin.ebers)
Keywords: testcase-wanted
Product: Firefox → Core
Reporter | ||
Comment 2•12 years ago
|
||
Hello Loic,
I tried for several hours to reproduce the bug in jsfiddle and on a local test page, but I cannot get it to behave like on our website. I added a video to emphasise the problem. I tried to reproduce it on our site on more computers and it definitely happens in every FF19+ version.
Link to a 30 second screencast:
http://screencast.com/t/rvewzv0w
It is definitely not (only?) a problem with rendering dynamic elements with a background-image in it because this generally works, but must rather be a side effect or some more things.
Flags: needinfo?(robin.ebers)
Reporter | ||
Updated•12 years ago
|
Hardware: x86 → x86_64
Reporter | ||
Comment 3•12 years ago
|
||
I just isolated the bug and it is actually only happening when the parent table is the CSS attribute "border-collapse: collapse;". See the attached file for a simple test case.
Reporter | ||
Comment 4•12 years ago
|
||
Simple test case. As soon as you remove "border-collapse: collapse;" from the table style, the images load as expected.
Attachment #718365 -
Attachment mime type: text/plain → text/html
Keywords: testcase-wanted → testcase
Confirmed (with the testcase and link in comment #0).
The images are not loaded immediately, scrolling or switching to another tab then going back fixes the issue.
Regression range:
m-c
good=2012-11-06
bad=2012-11-07
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f9c2c266e7aa&tochange=e587aa26326e
Status: UNCONFIRMED → NEW
status-firefox19:
--- → affected
tracking-firefox19:
--- → ?
tracking-firefox20:
--- → ?
tracking-firefox21:
--- → ?
tracking-firefox22:
--- → ?
Ever confirmed: true
Keywords: regression,
regressionwindow-wanted
Comment 6•12 years ago
|
||
Regression window
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/3523098f7911
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/19.0 Firefox/19.0 ID:20121106135430
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/8d793eb6a281
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/19.0 Firefox/19.0 ID:20121106140530
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=3523098f7911&tochange=8d793eb6a281
Regressed by: Bug 798964
Blocks: 798964
Keywords: regressionwindow-wanted
Comment 7•12 years ago
|
||
Comment 8•12 years ago
|
||
Updated•12 years ago
|
Attachment #718887 -
Attachment mime type: text/plain → text/html
Comment 9•12 years ago
|
||
A temporary workaround is to use cellspacing="0" on the table element instead of using the border-collapse CSS property.
Assignee: nobody → matt.woodrow
Reporter | ||
Comment 10•12 years ago
|
||
(In reply to Spellcoder from comment #9)
> A temporary workaround is to use cellspacing="0" on the table element
> instead of using the border-collapse CSS property.
Negative, cellspacing="0" does not result into the same behaviour as "border-collapse: collapse;" - and it shouldn't if I think about it. Any other working workaround?
Comment 11•12 years ago
|
||
the places where this bug bites us, we were using "border-collapse: collapse;" (and td { padding: 0; })" only as a css replacement for cellspacing=0, cellpadding=0, and we weren't actually using borders.
In that case, using old-fashioned cellspacing=0 cellpadding=0 instead of border-collapse:collapse, is a workaround for us.
Comment 12•12 years ago
|
||
(In reply to Loic from comment #5)
> Confirmed (with the testcase and link in comment #0).
> The images are not loaded immediately, scrolling or switching to another tab
> then going back fixes the issue.
Given your description of the problem/workaround, we'd take a low risk uplift but would not track for upcoming releases.
Assignee | ||
Comment 13•12 years ago
|
||
This is the same as bug 844750.
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•