Bug 136428 – box-shadow renders incorrectly to PDF

• Status: NEW
• Component: CSS

[ben]

Created attachment 237451 [details]
Test case and example output

I have written an Mac OS X utility which uses WebKit to produce screenshots which meet exact specifications. This allows us to be completely consistent in all our materials.

When rendering to PDF, the same box-shadow is used for all elements which have any box shadow.

It works great outputting to a PNG. And it *almost* works producing a PDF. It'd be great if PDFs work because all our web UI is done in vectors, so it would look wonderful when printed.

The attachment contains a minimal HTML file which illustrates the problem, and bitmap output (correct) and PDF output (incorrect).

The PDF was generated with this code:

	NSData *pdf = [_webView dataWithPDFInsideRect:bounds];
	[pdf writeToFile:[NSString stringWithFormat:@"%@/%04d.pdf", _outputPathPDF, _lastSnapNumber] atomically:YES];

where _webView is a pointer to a WebView instantiated by Interface Builder:

	IBOutlet WebView *_webView;

[Brad Andalman]

I hit this same issue today, and was surprised to find that this bug is still open and valid. 

Since a lot has changed since 2014 (!), I opened the original filer's "test.html" and used Safari's Export to PDF command to create a PDF. The generated PDF looks different than the original filer's attached "0002.pdf." In fact, it looks a lot worse!

In the case I encountered today, the rendering problems are more subtle, though they are bad enough that we can't use box shadows at all when rendering to PDF.

I will attach a new html/pdf pair that illustrates the artifacts that I'm hitting. I'll also attach a new pdf created from the original filer's "test.html."

[Brad Andalman]

Created attachment 459945 [details]
PDF generated from original filer's test.html

This was generated by opening the previously-attached test.html and using Export to PDF in Safari.

[Brad Andalman]

Created attachment 459946 [details]
Very simple box-shadow that isn't rendered correctly to PDF

HTML of a square with a simple box-shadow. Rendering this using Safari's Export to PDF results in a box shadow with artifacts (PDF to be attached shortly).

[Brad Andalman]

Created attachment 459947 [details]
PDF generated by using Export to PDF in Safari on box-shadow.html

PDF generated by loading box-shadow.html (see attached) into Safari, and then using Export to PDF. Note the artifacts in the corners.