display: flex doesn't reflect in wkhtmltoimage

shinokada commented 2 years ago

wkhtmltopdf version(s) affected: x.y.z

wkhtmltopdf 0.12.6 (with patched qt)

OS information

MacOS 11.6

Description

When I create an image with and without CSS flex, there is no difference in created images using wkhtmltoimage. The browser renders flex value and it positions at the center in the following CSS.

.center{
  display: flex;
  justify-content: center;
  align-items: center;
  height:${BROWSER_HEIGHT}px;
}

How to reproduce

index.html

<!DOCTYPE html>

<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
html {
position: relative;
height: 100%;
}

body {
padding:0;
margin:0;
font-family: "Luckiest Guy";
}
.center{
display: flex;
justify-content: center;
align-items: center;
height:880px;
}
  
h1 {
font-size: 240px;
background-image: url(/Users/shinichiokada/Bash_Projects/Cliptext/cliptext/flower.jpg);
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding: 100px;
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">It's Friday!</h1>
</body>
</html>

Terminal code:

wkhtmltoimage --width 1920px --height 1080 --enable-local-file-access ./index.html

Expected behavior

It should reflect the CSS flex and positions it in the center.

virtualsites commented 2 years ago

Please check this in your css styles:

display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;

Jickey commented 2 years ago

display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;

I put this code in,but did not work

Sicos1977 commented 2 years ago

https://github.com/Sicos1977/ChromeHtmlToPdf ... also works on Linux

wkhtmltopdf / wkhtmltopdf

display: flex doesn't reflect in wkhtmltoimage #5094