Full-page screenshotting looks funny on pages with background-image parallax effect

[jnachtigall]

Happens with Firefox 54 as well as 56.0a1 (2017-07-13) (64-bit) on Windows.

STR:

1. Go to http://www.bmvi.de
2. Do full page screenshot
3. The screenshot is missing many background images in the middle of the page, and other images seem to be cropped, see https://screenshots.firefox.com/6Lb5av0nbsw2IG2d/www.bmvi.de

Locking at the Console, there's:

------Error in promise: TypeError: result is undefined
Stack trace:
callBackground/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:7:1
promise callback*callBackground@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:6:10
exports.takeShot@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/shooter.js:112:26
onClickFullPage@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:169:7
assertIsTrusted/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/assertIsTrusted.js:17:12
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
EventListener.handleEvent*display/this.ui</this.element.onload<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:262:13
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
EventHandlerNonNull*display/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:222:33
display@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:209:14
display/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:329:21
promise callback*display@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:328:14
start@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:374:20
setState@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:192:7
exports.activate@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:835:7
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
this.uicontrol<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:941:3
@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:6:19
 
catcher.js:73:11
callBackground/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:7:1
promise callback*callBackground@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:6:10
exports.takeShot@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/shooter.js:112:26
onClickFullPage@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:169:7
assertIsTrusted/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/assertIsTrusted.js:17:12
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
EventListener.handleEvent*display/this.ui</this.element.onload<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:262:13
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
EventHandlerNonNull*display/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:222:33
display@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:209:14
display/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:329:21
promise callback*display@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:328:14
start@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:374:20
setState@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:192:7
exports.activate@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:835:7
watchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
this.uicontrol<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:941:3
@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:6:19
 catcher.js:74:11
	watchPromise/this.catcher< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:74:11
	(Async: promise callback)
	watchPromise moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:65:12
	exports.takeShot moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/shooter.js:112:5
	onClickFullPage moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:169:7
	assertIsTrusted/< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/assertIsTrusted.js:17:12
	watchFunction/this.catcher moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
	(Async: EventListener.handleEvent)
	display/this.ui</this.element.onload< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:262:13
	watchFunction/this.catcher moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
	(Async: EventHandlerNonNull)
	display/this.ui< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:222:33
	display moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:209:14
	display/this.ui< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:329:21
	(Async: promise callback)
	display moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:328:14
	start moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:374:20
	setState moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:192:7
	exports.activate moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:835:7
	watchFunction/this.catcher moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16
	this.uicontrol< moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:941:3
	<anonymous> moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:6:19
Unhandled error: Object { fromMakeError: true, name: "TypeError", message: "TypeError: result is undefined", stack: "callBackground/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:7:1\npromise callback*callBackground@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/callBackground.js:6:10\nexports.takeShot@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/shooter.js:112:26\nonClickFullPage@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:169:7\nassertIsTrusted/<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/assertIsTrusted.js:17:12\nwatchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16\nEventListener.handleEvent*display/this.ui</this.element.onload<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:262:13\nwatchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16\nEventHandlerNonNull*display/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:222:33\ndisplay@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:209:14\ndisplay/this.ui<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:329:21\npromise callback*display@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/ui.js:328:14\nstart@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:374:20\nsetState@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:192:7\nexports.activate@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:835:7\nwatchFunction/this.catcher@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/catcher.js:54:16\nthis.uicontrol<@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:941:3\n@moz-extension://d00d93c9-9fb1-44e8-beae-a9be71d6b8e7/selector/uicontrol.js:6:19\n" }
 undefined catcher.js:16:7

[jaredhirsch]

Hi, thanks for filing this bug.

The page is really long, so it probably hit the 5000 pixel max limit. It looked like the whole page was included when I took a shot: https://screenshots.firefox.com/FtFOqF9Wdhf9hy7R/www.bmvi.de, but if parts are missing, that's unfortunately by design.

The screenshot looks weird because this website uses parallax effects to scroll different background-images into view as the user travels down the page. The text on top is white, and the page underneath is white. I'm not sure what we can do in such a case. @ianb, thoughts?

[jaredhirsch]

I haven't come up with any way we could better handle cases like this one. Closing, sorry.

[jnachtigall]

@6a68 Thanks for looking it it. But is there nobody to 'needinfo' for?

In the end this might not be a Firefox Screenshots bug but more down the stack (gecko, renderer, whatever). FWIW, screenshotting the above mentioned site with the Chrome screenshot tool (as available in Chrome DevTools) works just fine. So I guess this can be done.

So I find it a bit strange to close this bug kinda as 'WONT FIX'.

I am happy to open on BMO if someone can point me to the right product/component/person...

[jaredhirsch]

@jnachtigall Sure, I can dig further

[jaredhirsch]

The full page option got removed from the 55 release at the last minute, but we're hoping to restore it in the next version.

[johngruen]

So this is still a thing, i am going to dupe it to #3124 since it's the same issue (or has the same fix anyway)