58982 – box-shadow glitch on hover with -webkit-transition

Bug 58982 - box-shadow glitch on hover with -webkit-transition

Summary: box-shadow glitch on hover with -webkit-transition

Status:	RESOLVED FIXED

Alias:	None

Product:	WebKit
Classification:	Unclassified
Component:	CSS (show other bugs)
Version:	420+
Hardware:	PC Windows 7

Importance:	P2 Normal
Assignee:	Nobody

URL:
Keywords:

Duplicates (1):	58980 (view as bug list)
Depends on:
Blocks:

Reported:	2011-04-20 05:41 PDT by Husar
Modified:	2011-05-19 14:12 PDT (History)
CC List:	3 users (show)

See Also:

Attachments
The h1 on this page has multiple box-shadows and on hover they render awkwardly, one after another (19 bytes, text/plain) 2011-05-04 12:44 PDT, Joel A Glovier	no flags	Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Husar 2011-04-20 05:41:41 PDT

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);
}

Comment 1 Husar 2011-04-20 05:43:19 PDT

*** Bug 58980 has been marked as a duplicate of this bug. ***

Comment 2 Joel A Glovier 2011-05-04 12:42:56 PDT

I too have experienced this bug, and there is an example in the h1 on this page I built: http://cure.org/goh

Also posted about it on StackOverflow here: http://stackoverflow.com/questions/3942971/webkit-choking-on-rendering-multiple-text-shadow-box-shadow-values-with-webkit

Comment 3 Joel A Glovier 2011-05-04 12:44:22 PDT

Created attachment 92304 [details]
The h1 on this page has multiple box-shadows and on hover they render awkwardly, one after another

Comment 4 Joel A Glovier 2011-05-09 08:25:44 PDT

Just noticed that the current build of Chrome (Chrome version 10.0.648.205) resolves the bug in how it renders the double shadow transition. Safar, however, as of version 5.0.5 (6533.21.1), still displays the bug.

Comment 5 Shane Stephens 2011-05-18 20:34:35 PDT

Confirm that this is fixed in Chrome 11 and Canary.  I'm marking this as fixed as it looks to have been resolved in WebKit.

Comment 6 Joel A Glovier 2011-05-19 03:46:59 PDT

(In reply to comment #5)
> Confirm that this is fixed in Chrome 11 and Canary.  I'm marking this as fixed as it looks to have been resolved in WebKit.

Did you see that Safari still displays with the bug?

Comment 7 Shane Stephens 2011-05-19 14:12:30 PDT

WebKit nightly renders the transition correctly.  The issue is fixed in WebKit but will obviously take some time to roll out into a production version of Safari.