Erroneous Divider Showing Up
joshuamcginnis opened this issue · comments
I'm having an issue running webkit2png on a JS-heavy app I'm working on. For some reason, the thumbnails are being printing with this divider running right through them:
It seems that by setting a large enough height (-H 4000), the problem goes away. I'm assuming the divider issue occurs when the page is long to need to combine multiple screenshots.
Any ideas on why this happening and/or how to fix this?
Weird. Behind the scenes webkit2png doesn't create multiple screenshots, it gets a copy of the rendered content directly from the window manager. But it's possible that either webkit or the on-page javascript isn't quite doing the right thing. Is there any chance of getting some kind of test url that demonstrates this problem to debug what's going on?
Actually, you can reproduce the issue from the login page: https://beta.quickbase.com/db/main?a=signin
python webkit2png.py https://beta.quickbase.com/db/main?a=SignInGenerates:
Were you able to reproduce the issue?
Yeah, I see it on my computer too. I haven't had time to work out why it's happening yet. Sorry!
This is a bad interaction between fixed elements and webkit2png. To explain what's happening here I'll need to start by explaining a little bit about how WebKit and Cocoa work. Here's a basic schematic showing how the WebKit framework displays a webpage:
The full webpage (grey outline) is a DocumentView. The part of the browser window that displays the webpage (blue outline) is a FrameView. As you scroll the visible bit of the document view changes, but the basic structure stays the same:
Webkit2png works by creating this whole structure in a non-visible browser window sized as a normal browser might be (usually 800×600) then capturing the contents of the DocumentView rather than the FrameView. This works great for most webpages, but your webpage has a small gradient in a <footer id="bottomFooter"> element positioned using position: fixed, shown here as a gradient:
When you scroll in a normal browser this works fine. When you open this page in webkit2png, the gradient is positioned at the bottom of the FrameView (as it should be) which means when the DocumentView is captured it shows up at the bottom.
There's no sensible way for me to detect this situation within webkit2png - it would either involve creating a huge window (which would probably crash the window server) or doing deep inspection of the page stylesheet and lots of magic to guess whether an element is in the wrong place. This would likely fail more often than it works.
Fortunately for you you there's a workaround you can use. You can just hide that element with some Javascript before capturing the page. For example:
./webkit2png --js='$("#bottomFooter").hide()' https://beta.quickbase.com/db/main?a=SignIn
I hope this works for you.
@paulhammond Nice. Thanks man.