Hi!
I'm trying to make an application using QtWebKit on Windows and Mac OS and I've noticed the following rendering issue on Mac when the -webkit-mask-image CSS propery is used:
qtwebkit_mac_issue.jpg
Here's the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 2em;
background: pink;
}
.button {
width: 140px;
height: 140px;
background: red;
border-radius: 20px;
border: 1px solid #000;
}
.button span {
display: block;
width: 80px;;
height: 80px;
margin: 0 auto;
background: black;
-webkit-mask-image: url(grid.png);
}
</style>
</head>
<body>
<div class="button"><span></span></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 2em;
background: pink;
}
.button {
width: 140px;
height: 140px;
background: red;
border-radius: 20px;
border: 1px solid #000;
}
.button span {
display: block;
width: 80px;;
height: 80px;
margin: 0 auto;
background: black;
-webkit-mask-image: url(grid.png);
}
</style>
</head>
<body>
<div class="button"><span></span></div>
</body>
</html>
To copy to clipboard, switch view to plain text mode
Is there a way to fix this issue?
Bookmarks