QT WebKit 4.7.4/4.8.0b - CSS3 webkit-mask-image and webkit-gradient
-
Hi,
I try to use CSS3 mask image to apply on some texts in a div but this seems to do not display correctly on Mac (64 bits and 10.6) QT SDK/WebKit... We don't have the same problem with the Windows release of QT.
You could easily generate the problem by open the following HTML file into a simple WebView and compile it on Windows and Mac.
The Mac version don't apply the gradient as a mask at all...I try to download the QT4.8.0 beta with WebKit 2.2.0 but this do not resolve the problem...
Best,
Manu.
@<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>.gradient { -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), color-stop(0.05, rgba(255,255,255,1)), color-stop(0.95, rgba(255,255,255,1)), to(rgba(0,0,0,0))); } .title { width: 300px; height: 200px; } .titleContent { color: #ffffff; line-height: 20px; overflow: hidden; white-space: nowrap; } </style> </head> <body> <div class="title"> <span class="titleContent gradient">Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</span> </div> </body>
</html>@
-
Same problem here. CSS masks don't work on MacOS 10.6-10.6 with Qt4.7.4-4.8.0 - qtwebkit 2.1.0-2.2.0
e.g.
<image src="xxx.jpg" style="-webkit-mask-image:url(mask.svg);-webkit-mask-repeat:no-repeat"/>I seems to be an old bug, but I couldn't find anyone mentioning it, except here. Anyone can comment on that? A solution would be more than useful!!!
-
The -webkit-mask-image still doesn't work with Qt 4.8.1 on Mac OS Lion.
There seems to be some problems with border-radius too.!http://i41.tinypic.com/nnsgmh.jpg(qt webkit mask-image mac os issue)!
@
<!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>
@There is a solution for this issue?