Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt WebKit
  4. QT WebKit 4.7.4/4.8.0b - CSS3 webkit-mask-image and webkit-gradient
Forum Updated to NodeBB v4.3 + New Features

QT WebKit 4.7.4/4.8.0b - CSS3 webkit-mask-image and webkit-gradient

Scheduled Pinned Locked Moved Qt WebKit
5 Posts 4 Posters 6.0k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    EmmanuelVerlynde
    wrote on 5 Oct 2011, 14:39 last edited by
    #1

    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>@

    1 Reply Last reply
    0
    • I Offline
      I Offline
      itnewbie
      wrote on 1 Nov 2011, 18:21 last edited by
      #2

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

      1 Reply Last reply
      0
      • D Offline
        D Offline
        danielt
        wrote on 3 Nov 2011, 14:25 last edited by
        #3

        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!!!

        1 Reply Last reply
        0
        • C Offline
          C Offline
          Chirieac
          wrote on 14 Apr 2012, 23:52 last edited by
          #4

          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?

          1 Reply Last reply
          0
          • C Offline
            C Offline
            Chirieac
            wrote on 15 Apr 2012, 19:04 last edited by
            #5

            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);
            ...
            }
            @

            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved