1082249 - Table TD with background-attachment Fixed Scrolling Results in Weird Pixel Rendering

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[ggnoreneverdie]

Attachment: mozbug.zip

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:24.7) Gecko/20140907 Firefox/24.7 PaleMoon/24.7.2
Build ID: 20140907200403

Steps to reproduce:

If a table column is set to use a fixed background image, if you scroll down or up in the document, the background image of the table column becomes distorted and renders multiple times incorrectly.  However, if you resize the Firefox window, the backgrounds are correctly rendered until the user scrolls again.


Actual results:

View this JSFiddle with the latest version of Firefox:

http://jsfiddle.net/b3pfzt94/

Scroll down, and then scroll up.  Notice how the background becomes messed up?

Note, the JSFiddle example appears to only trigger the messed up background when scrolling up, but I have seen other examples where scrolling down and up cause the background image distortion with a fixed background image.

For more information, check out this forum thread as well:
http://forums.mozillazine.org/viewtopic.php?f=25&t=2879081

I've also attached a video (XVID MPEG4 Codec Required to View) to this post illustrating both scrolling up and down causing anomalies.  


Expected results:

If you try the same fiddle in IE, it works fine.  Scrolling up or down in the document does not affect the fixed background-attachment of the table column backgrounds.

Comment 1

[ggnoreneverdie]

If you use a div, it appears to work fine, but that defeats the purpose of my table layout :(

No background anomalies with this JSFiddle since it uses a div to contain a fixed background-attachment:

http://jsfiddle.net/b3pfzt94/3/

Seems to be a bug with the way Firefox handles td

Comment 2

[Loic]

Regression range:
good=2012-11-16
bad=2012-11-17
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=58ebb638a7ea&tochange=9a6d708faf3f

Comment 3

[Alice0775 White]

Regression window(m-i)
Good:
http://hg.mozilla.org/integration/mozilla-inbound/rev/244493403e89
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/19.0 Firefox/19.0 ID:20121115151651
Bad:
http://hg.mozilla.org/integration/mozilla-inbound/rev/2c2c6ddb6fe6
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/19.0 Firefox/19.0 ID:20121115163151
Pushlog:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=244493403e89&tochange=2c2c6ddb6fe6

In local build
Last Good: 76e6feedd0d6
First Bad: 85793c93543a

Regressed by:
85793c93543a	Robert O'Callahan — Bug 810470. Part 3: Remove code for invalidating background-attachment:fixed content when scrolling. r=mattwoodrow New invalidation logic takes care of this automatically.

Comment 5

[Boris Zbarsky [:bzbarsky]]

roc, do you have time to look at this?

Comment 6

[j. 'mach' wust]

Attachment: Testcase with various kinds of affected table elements

This bug affects not only {background-attachment:fixed;} on TD, but also on TH, TR, THEAD, TBODY, or TFOOT, as well as other on elements that use CSS in order to look alike: {display:table-cell;}, {display:table-row;}, {display:table-header-group;}, {display:table-row-group;}, or {display:table-footer-group;}. The only table elements that are not affected are TABLE and CAPTION and, again, their CSS counterparts. Elements within table cells are not affected either.

Comment 7

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Attachment: Invalidate background-attachment:fixed table-part backgrounds when scrolled

Comment 8

[Robert O'Callahan (:roc) (email my personal email if necessary)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/dd08e5008cec

Comment 9

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/dd08e5008cec

Comment 10

[Greg Edwards]

Looks like this regressed? I replicated it in the wild at https://calendar.perfplanet.com/2010/png-that-works/ and all the testcases pertaining to tr, thead, tbody, and tfoot show breakage.

Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

Comment 11

[Timothy Nikkel (:tnikkel)]

(In reply to Greg Edwards from comment #10)
> Looks like this regressed? I replicated it in the wild at
> https://calendar.perfplanet.com/2010/png-that-works/ and all the testcases
> pertaining to tr, thead, tbody, and tfoot show breakage.
> 
> Mozilla/5.0 (Windows NT 10.0; WOW64; rv:53.0) Gecko/20100101 Firefox/53.0

What part of that page is wrong? I couldn't tell when I quickly took a look.

In any case we'll want a new bug to investigate this.

Comment 12

[Greg Edwards]

The pixels involved in the fixed background don't invalidate when the window is scrolled. The most obvious breakage in attachment 8571442 [details] is that the backgrounds in some of the rows (the affected ones) appear to scroll with the page rather than being a 'window' through to the beaver image. The background pops back into place when you horizontally resize the window. Other activities like text selection will also force invalidate the background.