[Webkit-unassigned] [Bug 36211] New: Flickering of slide out content using CSS animations in Nightly

[bugzilla-daemon at webkit.org]

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

           Summary: Flickering of slide out content using CSS animations
                    in Nightly
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Major
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: info at sebastian-werner.net


The new CSS animation feature in Safari has somehow got broken in Nightly
Webkit.

I am refererring to an implementation used by jqtouch for example where layers
are slide out and in. At the end of the animation the element which is moved
out of view is flickering on top of the new layer to show.

Please have a look at this example:
http://www.jqtouch.com/preview/demos/main/#home

The animations when clicking on the links is nice on Safari 4.0.5 on my Snow
Leopard Mac (and also on the iPhone Simulator), but it has the flickering
effect on the same machine when using Webkit Nightly.

User-Agent:
"Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; de-de) AppleWebKit/533.3+
(KHTML, like Gecko) Version/4.0.5 Safari/531.22.7"

Tested with Webkit builds until:
March 17th 2010


This is the CSS used by the demo:

.in, .out
    -webkit-animation-timing-function: ease-in-out
    -webkit-animation-duration: 350ms


.slide.in 
    -webkit-animation-name: slideinfromright


.slide.out 
    -webkit-animation-name: slideouttoleft


.slide.in.reverse 
    -webkit-animation-name: slideinfromleft


.slide.out.reverse 
    -webkit-animation-name: slideouttoright


@-webkit-keyframes slideinfromright 
    from
        -webkit-transform: translateX(100%) 
    to
        -webkit-transform: translateX(0) 

@-webkit-keyframes slideinfromleft 
    from
        -webkit-transform: translateX(-100%) 
    to
        -webkit-transform: translateX(0) 

@-webkit-keyframes slideouttoleft 
    from
        -webkit-transform: translateX(0) 
    to
        -webkit-transform: translateX(-100%) 

@-webkit-keyframes slideouttoright 
    from
        -webkit-transform: translateX(0) 
    to
        -webkit-transform: translateX(100%)

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.