Bug 136428

Summary: box-shadow renders incorrectly to PDF
Product: WebKit Reporter: ben <ben>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bdakin, bw, bya, simon.fraser, thorton
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.8   
Attachments:
Description Flags
Test case and example output
none
PDF generated from original filer's test.html
none
Very simple box-shadow that isn't rendered correctly to PDF
none
PDF generated by using Export to PDF in Safari on box-shadow.html none

Description ben 2014-09-01 08:56:50 PDT
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;
Comment 1 Brad Andalman 2022-06-01 18:02:09 PDT
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."
Comment 2 Brad Andalman 2022-06-01 18:03:46 PDT
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.
Comment 3 Brad Andalman 2022-06-01 18:05:46 PDT
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).
Comment 4 Brad Andalman 2022-06-01 18:07:09 PDT
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.