css - Full-page (PDF) screenshots in iOS 14 Safari isn't handling -webkit-mask well

Question

I am trying to take a screenshot of a web page that uses -webkit-mask to display icons. If I switch to the "Full page" tab of the screenshot dialog, the icons look bad. Consider the following web page:

<div
  style="
    width: 300px;
    height: 300px;
    background: red;
    -webkit-mask: url('/mask.svg') 50% 50% / contain no-repeat;
  "
></div>

If I take a regular screenshot, it looks good:

regular screenshot with properly applied masks

If I switch to "Full page", the mask isn't applied correctly:

full-page screenshot with incorrectly applied mask

This likely isn't an issue for regular users. But if you're doing screenshot testing (like I am) you want to make sure that the screenshot is as close to what the user sees as possible. This bug is also present in WKWebView.createPDF which makes automation harder.

For reference, this is the mask.svg being applied:

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" 
d="M7.25 8.75V14H8.75V8.75H14L14 7.25H8.75V2H7.25V7.25H2V8.75H7.25Z" fill="yellow"/>
</svg>

question from:https://stackoverflow.com/questions/65841906/full-page-pdf-screenshots-in-ios-14-safari-isnt-handling-webkit-mask-well

Answer 1

Waitting for answers