[Webkit-unassigned] [Bug 58982] New: box-shadow glitch on hover with -webkit-transition

[bugzilla-daemon at webkit.org]

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

           Summary: box-shadow glitch on hover with -webkit-transition
           Product: WebKit
           Version: 420+
          Platform: PC
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: enfantsauvage at gmx.com


If you have an HTML element with multiple box-shadows that should get a change in the box-shadow values after a hover with -webkit-transition there is a noticeable glitch in the shadows rendering.  

Tho replicate:
Create an element (<div>) with the following styles:

div {
    width:220px;
        background-color:#DDD;
    border:1px solid #857A6D;
    border-left:1px solid #C5BEB8;
    border-top:1px solid #C5BEB8;
    padding:30px 30px 60px;
    border-radius:8px;
       -webkit-transition: all .4s ease-in-out;    
       -webkit-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
        inset 0 3px 15px rgba(0, 0, 0, 0.1); 
           box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
        inset 0 3px 15px rgba(0, 0, 0, 0.1);
}

div:hover {
    -webkit-box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
        inset 0 3px 15px rgba(0, 0, 0, 0.1),
        4px 4px 6px rgba(166, 153, 140, 0.7), 
        -3px -3px 6px rgba(166, 153, 140, 0.7);
    box-shadow: inset 4px 4px 4px rgba(245, 245, 245, 0.8), 
        inset 0 3px 15px rgba(0, 0, 0, 0.1),
        4px 4px 6px rgba(166, 153, 140, 0.5), 
        -2px -2px 6px rgba(166, 153, 140, 0.5);
}

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