Steps: #1. Go to URL #2. Open _bkPos and _bkPosXtra in new tabs #3. Scroll to bottom of _bkPos page #4. Choose last item in list; observe #5. Choose 2nd-last item; observe #6. Choose 3rd-last item; observe #7. Go to _bkPosXtra tab #8. Repeat #3-#6 #9. Go back to _bkPos tab; observe Bug: Initial steps #4-#6 display various rendering artifacts for background elements that drop below bottom-most rendering foreground content. Click handler modifies background CSS properties on <body> element. Overall list has generous margin-bottom space, within which area the rendering bugs appear. The second page fixes the problem by placing an extra element at the very bottom of the page. Note that at #9, navigating back to the original page causes any rendering artifact to disappear.
Would you be willing to create a reduced test case that could be attached here?
I spawned a few simplified pages, the various "_render" pages posted here: http://letmespellitoutforyou.com/t/ Again, in all these cases, the bottom-most displaying element is the gray list that contains the song titles. When trimming the number of list items, I noticed a relevant variable. All of these pages DO NOT display the rendering bug when the browser screen is large and there's plenty of clearance on the bottom. The relevant pages DO display the bug when you first do the following: 1. Resize the window so that the bottom-right corner roughly aligns with the bottom-right of the last list item ("Hot Cakes") 2. Scroll to the bottom of the page 3. If necessary, reload. These pages tried to isolate various page-redraw scenarios, built as follows: _render1: CSS places background-image directly in bottom margin gutter _render2: initial CSS places same img above screen; load handler applies alternate CSS class that places img in bottom margin gutter using background-position CSS _render3: same as #2, but 2-second timeout before alternate CSS applies _render4: same as #3, but additional CSS transition _render5: same as #4, but NO timeout delay, and YES animated transition Nightly build displays rendering artifacts for cases #3-#5, all of which involve some combination of delays before image's final position renders. The animating examples display additional rendering artifacts when you scroll during the transition's progress.
Created attachment 143328 [details] Testcase