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

[bugzilla-daemon at webkit.org]

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

           Summary: box-shadow glitch on hover with -webkit-transition
           Product: WebKit
           Version: 528+ (Nightly build)
          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;    
}

.boxshadow #section-one address {

    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    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); 
    -moz-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); 
}

.boxshadow #section-one address: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);*/
    -moz-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.