[Webkit-unassigned] [Bug 107288] New: Race condition when toggling classes disabling CSS transitions

[bugzilla-daemon at webkit.org]

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

           Summary: Race condition when toggling classes disabling CSS
                    transitions
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
               URL: http://jsfiddle.net/m_gol/3hwjC/18/
        OS/Version: Mac OS X 10.8
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: m.goleb+bugzilla at gmail.com
                CC: simon.fraser at apple.com


Look at the linked jsFiddle. Because I want to transition the box moving upwards and it doesn't initially have 'top' set in CSS, I need to set it to window height minus box height while transitions are disabled. I am using a special class disabling transitions to set the initial value. However, WebKit seems to swap the following two commands in execution:
               div.style.top = (window.innerHeight - 50) + 'px';
               div.className = '';
so transitions are executed creating weird effects (just compare any WebKit browser to Firefox, Opera or IE10), even if I wrap lines 24-28 from linked jsFiddle in setTimeout (can be as long as you want). Wrapping the statement resetting className in setTimeout with even timeout equal to 0 solves the problem:
http://jsfiddle.net/m_gol/3hwjC/17/
I can reproduce it in Chrome stable & Canary, Safari & WebKit nightly. Firefox, Opera & IE10 don't exhibit the issue.

Just a note: there is a separate issue in other browsers when you remove the 50ms callback wrapping the:
                div.style.top = '50px';
statement; non-WebKit browsers don't transition the box when it's moving upwards but I don't know if it's related to this bug.

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