Footer and Header Template

Hello there, So i'm trying to add header and footer to my document using the options headerTemplate and footerTemplate from page.pdf().

Here's my headerTemplate:

<!DOCTYPE html>
<html>
<head>
  <style>#iqwut { box-sizing: border-box; height: 100px; width: 100%; font-size: 18px; margin: 0 30px; }#iybdk { box-sizing: border-box; display: table; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; width: 100%; }#ipplj { box-sizing: border-box; width: 8%; display: table-cell; height: 75px; }#i60rj { box-sizing: border-box; padding: 10px; background-color: red; color: yellow; }#ivk0e { box-sizing: border-box; width: 8%; display: table-cell; height: 75px; }</style>
</head>
<body>
  <header id="iqwut" ><div class="gjs-row" id="iybdk" ><div class="gjs-cell" id="ipplj" ><div id="i60rj" >SOME TEXT FOR TEST</div></div><div class="gjs-cell" id="ivk0e" ></div></div></header>
</body>
</html>

When i execute it (https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro), the render is what i'm expecting.

Though when i passed this string to headerTemplate, i have no background-color. And this is a simple case when my goal is to have nested div with nested styles.

I am facing a dead-end or is there a way to display a div with nested style correctly ?

Config: "puppeteer": "^20.3.0"

alvarcarto / url-to-pdf-api

Footer and Header Template #200