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; 
            }
            
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        
        <div class="title">
            <span class="titleContent gradient">Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World</span>
        </div>
        
    &lt;/body&gt;
    

    </html>@



  • I have same problem with "-webkit-gradient" on Mac.
    Any body can help?



  • 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?



  • I've found the solution: I just needed to set the graphics system to raster

    @
    int main(int argc, char *argv[])
    {
    QApplication::setGraphicsSystem("raster");
    QApplication app(argc, argv);
    ...
    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.