This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Draw bug on background-image inline-css when content is created dynamically

  • 7 replies
  • 6 have this problem
  • 2 views
  • Last reply by Reitman

more options

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 contain a inline-style like:

<td style="background-image: url(http://a.cdn.net/path/to/image.png)">...</td>

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.

Any ideas how to prevent this and when it will be fixed?

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 contain a inline-style like: <td style="background-image: url(http://a.cdn.net/path/to/image.png)">...</td> 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. Any ideas how to prevent this and when it will be fixed?

Modified by daryrace

All Replies (7)

more options

hello, if you've found a genuine & reproducible bug, please file it at bugzilla.mozilla.org - there it will get the attention of developers. here on the support forums we try to provide solutions to users for common questions & problems, but we are not in the bug-fixing business. thank you...

more options

I have same problem too. On XP and Seven!

more options

this is now apparently worked upon in bug #844750.

more options

Is exactly this problem! When mozilla think fix this?

more options

according to the comments in the bug report the fix is targeted for the next beta version of firefox 20 which is going to be built next week.

more options

In bugzilla they changed status for RESOLVED FIXED. But fixed just in FF 22. So firefox 19 will continue with this bug? I have many sites that not displayed well because this bug!