Slow rendering and unexpeted result (opacity) adding a background image as watermark

[noseshimself]

Environment: Debian-like CromeOS default Linux VM+container penguin Debian package as per https://packages.debian.org/search?keywords=weasyprint&searchon=names&suite=all&section=allresulting in installation of version 51(!)

It should be simple to verify if this is still happening at version 56 but I'm not pwemitted to modify my ChromeBook's setup to update weasyprint.

If I add the following section to my template

@media print {
    body :before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(watermark.png);
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      z-index: -1;
      opacity: 0.05;
    }
}

1. rendering it takes a really long time (about 90 CPU seconds compared to less than 3 before) and the result is not what I expect it to be at all.

2. watermark.png is a 300dpi version of the company logo in 2% black (so it is pretty invisible at opacity 1 already) at 4500*1800 pixels in a very reduced pallette of two full rgb colors. As long as opacity is above 0.11 it is still extremely dark (I would guess somewhere around 50% of full black). Below that it is completely invisible.

3. Non-deterministic bonus: If I remove content: ""; the background appears. Or not. I can't find a pattern there.

[liZe]

Hi!

Thanks for this bug report.

1. rendering it takes a really long time (about 90 CPU seconds compared to less than 3 before) and the result is not what I expect it to be at all. 2. watermark.png is a 300dpi version of the company logo in 2% black (so it is pretty invisible at opacity 1 already) at 4500*1800 pixels in a very reduced pallette of two full rgb colors. As long as opacity is above 0.11 it is still extremely dark (I would guess somewhere around 50% of full black). Below that it is completely invisible.

Could you please share the whole document (HTML, CSS, images…), or at least the logo?

3. Non-deterministic bonus: If I remove content: ""; the background appears. Or not. I can't find a pattern there.

Removing content: "" removes the rendering of the whole :before block, that’s normal in CSS and expected.

[noseshimself]

[liZe]

Oh, I know what’s going on.

Your rule should be body:before, not body :before. body :before is equivalent to body *:before, meaning that all the descendants of your body tag will generate an image. If you have 100 tags on your first page, you get 100 watermarks.

That’s why:

• it’s slow, and
• it’s not transparent.

[noseshimself]

Your rule should be body:before, not body :before. body :before is equivalent to body *:before, meaning that all the descendants of your body tag will generate an image. If you have 100 tags on your first page, you get 100 watermarks.

The answer I wanted to give has been deleted by the censors 8-)))). (and pleas note that most examples of how to do this are using my way of writing it... sigh)

Thank you!

That also explains the non-transparency and other strange side-effect. It might be worth noting in the docs "if something takes extraordinarily long, please check your CSS for (things like this): we're not just heating the universe with your CPU.".