When trying to capture a screenshot of a web page that contains a form select box (drop down), the result does not display correctly in the rendered file output.

The text of the select box renders at the correct location, but the select box element (the portion rendered by the host OS / Browser) displays separately as an empty select box in the top left corner.

Please see the attached demo code and screenshot for an example.

Which version of PhantomJS are you using? 1.5.0

What steps will reproduce the problem? 1. Create a test page with a simple select box 2. Use PhantomJS to open and render the page to an image 3. Check the resulting image, the text will be in place but the drop down will be shown in the top left corner

What is the expected output? What do you see instead? The render function should render the select box correctly in the original location

Which operating system are you using? Mac OS X Lion

Did you use binary PhantomJS or did you compile it from source? I used the new updated homebrew package (Installed today)

I think there is already a reported issue for this. Can you search for it?

Hi,

The issue you might be referring to is this one:

Input fields don't appear correctly when rendering with clipRect bounds http://code.google.com/p/phantomjs/issues/detail?id=571

I had looked at that issue, and it may be caused by the same base issue (eg. odd rendering of form UI), but in that case, there seemed to be more of a focus on clipRect as the potential cause. If they are the same issue, then hopefully my simplified test case will help demonstrate the issue.

Other render related tickets seemed to be related to font rendering (and clipRect), but here's a summary of the ones I had looked at:

page.render(); only renders 400x300 image http://code.google.com/p/phantomjs/issues/detail?id=191

Font Antialiasing http://code.google.com/p/phantomjs/issues/detail?id=155

Embedded fonts not rendered http://code.google.com/p/phantomjs/issues/detail?id=247

Web Fonts do not render, use fallback fonts instead. http://code.google.com/p/phantomjs/issues/detail?id=592

I have the same problem on Mac OS X Lion. For now im hiding the select boxes.

@mfc Would you mind sharing the code you're using the hide those select boxes? Thanks

Hi there,

I'm literally hiding them like so: $("select").hide(); inside page.open callback.

Closing. This issue has been moved to GitHub: https://github.com/ariya/phantomjs/issues/10601