Form fields intermittently display with gray (grey) background

[jscodefix]

I am using pdftk to fill a proprietary PDF form. All other PDF renderers are properly displaying the flattened form fields (with a white background). But pdf.js is not properly displaying the form field (boxes); rather shading the form boxes with a gray (grey) background (but this is not consistent, some fields are rendered correctly with a white background).

Sample PDF: http://ge.tt/4Z1Y8Ft1/v/0

[Rob--W]

Could you provide a screenshot of how it looks, and how it is supposed to look?

To me, all boxes are white in Chromium 34 on Linux.

[jscodefix]

This issue is (only) occurring on Chrome (modern versions, up to 37 and beyond?), while this is not occurring on Firefox (version 31). Refer to the two attached screenshots of the W9 sample, showing the incorrect gray (grey) form field fill, and the correct white form field fill.

Take note that in the incorrect case, only some of the form fields are incorrectly gray; the Signature and Date form fields are correctly form filled with a white background.

[yurydelendik]

Looks fine for me on Chrome 37 and 39 for Mac OSX.

@jeffsheffel can you check if you have a filled rectangle at http://jsbin.com/lukoqajosudi/1 ?

[Rob--W]

Cannot reproduce using the latest PDF.js version (Chrome extension built from the top of the master branch) on Chromium 37.0.2019.0 and 38.0.2097.0 on Linux, regardless of whether GPU acceleration is enabled.

@yurydelendik Your link shows a grey square with a white fill on my box (Chrome and Firefox).

[CodingFabian]

windows 7, chrome 36, pdf has dark grey boxes. the jsbin by @yurydelendik has a lighter grey border with white fill.

[jscodefix]

@yurydelendik Just as Rob and Fabian, my Chrome (on Mac) rendered the outline of the gray box with the white fill; which I assume is the desired box rendering.

I'm guessing that you are verifying the checkbox/form field drawing commands (or constructPath OPS.rectangle from display/canvas.js). I will try to find the pdf.js debug technique, for determining the drawing commands output (if that's possible).

[yurydelendik]

@jeffsheffel use pdfBug Stepper https://github.com/mozilla/pdf.js/wiki/Debugging-PDF.js to see which commands draw your rectangles

[jscodefix]

@yurydelendik I was able to run the (Firefox on Mac) debugger (which correctly renders the above sample W9 document). Yet, the gray form box issue is occurring with Chrome (on Mac). Can debugging be done using Chrome?

Also, I notice that my debug line numbers don't match with the line numbers that you presented (255-257) in your jsbin snippet (linked above); which I assume you cut from your debugging of the W9 document, and then inlined the Javascript code. Here are my line numbers: 253 rectangle [176.212,605.6,-13,13] 254 rectangle [177.212,619.6,-15,-15] 255 fill [] So, it seems the rendering calls (eg. setFillRGBColor, or GlobalCompositeOperation) are being used differently through Chrome or Mac. Is that a possible cause of this gray form box issue?

[Rob--W]

@jeffsheffel You can just use URL parameters to activate the debugger. For example:

http://ge.tt/api/1/files/4Z1Y8Ft1/0/blob?download#pdfBug=all

If you use the PDF.js Chrome extension, then you can also append #pdfBug=all to activate the pdf debugger, e.g. chrome-extension://oemmndcbldboiebfnladdacbdfmadadm/https://bitcoin.org/bitcoin.pdf#pdfBug=all

[jscodefix]

@Rob--W Thanks for the tip; I'm using the stand-alone node server with Chrome, and the debugger does work. (The debug documentation implied that debugging was only supported on Firefox.)

So, on Mac Chrome, the form fields and checkboxes are rendered using constructPath (and not rectangle). The following sequence of commands renders a gray checkbox, then a gray form field, THEN a white form field... what?!?

@yurydelendik Can this graphical behavior be explained? Can you point me to digging deeper?

121 endText [] 122 setFillRGBColor [118,119,119] 123 save [] 124 transform [1,0,0,1,0,-9] 125 constructPath [[19,19],[60.5,286.56,-13,13,61.5,300.56,-15,-15]] 126 fill [] 127 restore [] 128 save [] 129 transform [1,0,0,1,0,-20] 130 constructPath [[19,19],[406.509,642.544,-371.001,28,407.509,671.544,-373.001,-30]] 131 fill [] 132 restore [] 133 save [] 134 transform [1,0,0,1,0,-32] 135 constructPath [[19,19],[406.338,468.239,-371.001,68.479,407.338,537.719,-373.001,-70.479]] 136 fill []

[Rob--W]

@jeffsheffel If you're interested in debugging the problem, then I suggest to have a look at Chromium's canvas inspector in the developer tools. I have written instructions about debugging a canvas rendering issue in Chrome at https://github.com/mozilla/pdf.js/issues/5043#issuecomment-48972506.

[yurydelendik]

constructPath for 19 is just commands to draw a rectange, see https://github.com/mozilla/pdf.js/blob/master/src/display/canvas.js#L980 (Let me adjust my test case http://jsbin.com/lukoqajosudi/4)

[jscodefix]

The significant difference is, that Firefox (which is rendering correctly) is using rectangle() commands, while Chrome (which is not rendering correctly) is using constructPath() commands.

[yurydelendik]

Firefox is using constructPath as well, you just using different PDF.js versions.

[jscodefix]

FIXED(?) Upon creating a simplified version of the (problematic W9) PDF, it was discovered that along with the form fields, our PDF form documents were also generated (from InDesign) with a box (that presents an outline around the form fields). It was this outline box that had a gray background setting. Whoops!! I was not aware that these outline boxes had (gray) fills.

So, this may not be an issue after all. What is baffling is, how is it that other rendering applications (Acrobat, pdf.js in Firefox, et. al.) were not filling the boxes with gray? And, why was the problem not consistent (within the same PDF document)? Perhaps it has to do with the order of rendering of the (gray) boxes; meaning, maybe the form fields had white backgrounds, which were layered on top of the gray boxes.

The fix (or workaround) for us is, to removed the (gray background outline) boxes, and instead set the form fields (themselves) with an outline. This problem stems from a lack of knowledge about InDesign conversion to PDF, and how PDF forms are to best created.

[Snuffleupagus]

Closing based on the above post, and also the information given in https://etherpad.mozilla.org/pdfjs-triage-2014-09-22.