[Webkit-unassigned] [Bug 150344] New: [GTK] Artifacts on animation with images, round borders, overflow:hidden and AC enabled

Mon Oct 19 15:23:12 PDT 2015

https://bugs.webkit.org/show_bug.cgi?id=150344

            Bug ID: 150344
           Summary: [GTK] Artifacts on animation with images, round
                    borders, overflow:hidden and AC enabled
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKit Gtk
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mario at webkit.org
                CC: bugs-noreply at webkitgtk.org, cgarcia at igalia.com,
                    mrobinson at webkit.org

Created attachment 263518
  --> https://bugs.webkit.org/attachment.cgi?id=263518&action=review
Reduced test cases

DESCRIPTION

Starting with WebKit2GTK+ 2.8 and up to the latest code from trunk (tested with r191308), I can reliably reproduce some visual artifacts when Accelerated Compositing mode is enabled AND I try to combine two concurrent animations at the same time, where one them acts over an element defining round borders and the 'overflow: hidden' CSS properties, and the other one acts over an image.

Note that this does not happen on OS X with the stable Safari (10601.1.56.2) nor with the latest Nightly build (I tried r191175) either, so it seems to be a bug exclusive to WebKitGTK+ (and maybe EFL) for some reason.

For instance, the following code (providing a valid test-image.png, included in the attached test case), produces that weird effect:

    <html>
    <style>
    #testDiv .mask { border-radius: 50%; overflow: hidden; -webkit-animation: "shrink-mask" 5s; }
    #testDiv img { -webkit-animation: "grow-image" 5s; }
    @-webkit-keyframes shrink-mask {
        from { -webkit-transform: scale(1, 1); }
        to { -webkit-transform: scale(0, 0); }
    }
    @-webkit-keyframes grow-image {
        from { -webkit-transform: scale(1, 1); }
        to { -webkit-transform: scale(4, 4); }
    }
    </style>
    </head>
    <body>
    <div id="testDiv">
      <div class="mask"><img src="test-image.png"></div>
    </div>
    </body>
    </html>

As you can see, the idea behind this test is to have two animations working in parallel: one that steadily increases the size of the image up to 4 times, and another one that reduces the size of the container element, effectively working as both a "mask" that cuts the extra bits of the image we just grew outside of the "mask" (due to overflow:hidden), at the same time it reduces the whole thing.

I've debugged this quite a bit and is still unclear why this is an issue specific to the GTK port and to Accelerated Compositing (e.g. it does not happen if we disabled AC by calling setAcceleratedCompositingEnabled(false)), but that seems to be the case as I could not reproduce it in the latest nightly, on OS X (and FWIW, is not a bug on Blink either).

In any case, I've wrote a full test case that reliably reproduces the issue for me in two different machines (x86 and x86_64), so the bug looks real. Please see attached a compressed file containing two test cases:
  * index.html: basically the code snippet from above plus the test-image.png. ARTIFACTS VISIBLE HERE.
  * index-works.html: a similar version of the text where I try to get the same visual effect without using external images, just DIVs and CSS. NO ISSUES HERE

STEPS TO REPRODUCE

  0. (Make sure Accelerated Compositing is enabled in your build of WebKit, otherwise the bug does not happen)

  1. Uncompress the contents of the attached file and load index-works.html in MiniBrowser
  2. You should initially see a red circle inside a gray box with the text "Text" inside (not an image, just a DIV + real text with some CSS styling)
  3. For 5s after loading, two animations make the text's dimension increase relative to its containing block (the circle) and the containing block reduced
  4. While the animation is going on, the container block acts as a "mask", hiding the overflown content away 

  5. Now uncompress load index.html in MiniBrowser
  6. You should initially see another red circle inside a gray box with the text "Text" inside (a real image this time)
  7. For 5s after loading, two animations make the image's dimension increase relative to its containing block (the "masking" DIV) and the containing block reduced
  8. While the animation is going on, the container block acts as a "mask", hiding the overflown content away

EXPECTED OUTCOME:

No artifacts are shown during the animations described in step (3) and (7).

ACTUAL OUTCOME:

When using a real image instead of simply a DIV+text with some CSS, the four lines defining the boundaries of the rounding box for the containing block that should be getting reduced and clipping the contents are displayed in some non-uniform way, rendered using the colour of the image's edges.

Note that this problem does not happen in WebKit 2.6 or WebKit 2.4, but at least from 2.8.0 this seems to be an issue. Anyway, I'll be attaching two screenshots to better show how this bug really looks (using index.html) and how it should look (using the index-works.html)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151019/5ccbd651/attachment.html>