Bug 90458 - -webkit-transition-property wrong computed value, causes screen jitter
Summary: -webkit-transition-property wrong computed value, causes screen jitter
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified All
: P2 Normal
Assignee: Nobody
URL: http://download.dojotoolkit.org/relea...
Keywords:
Depends on:
Blocks:
 
Reported: 2012-07-03 07:00 PDT by Bill Keese
Modified: 2012-07-06 17:55 PDT (History)
1 user (show)

See Also:


Attachments
simplified test case. use "remove hover" and "show hover" buttons to show screen jitter around the word "BOLD" (1.74 KB, text/html)
2012-07-03 07:01 PDT, Bill Keese
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Bill Keese 2012-07-03 07:00:53 PDT
See http://download.dojotoolkit.org/release-1.7.3/dojo-release-1.7.3/dijit/tests/test_Toolbar.html, which demonstrates a nasty jitter on hovering the toolbar buttons.

The root issue is that a node is getting a computed style of -webkit-transition-property of "all" even though the CSS is setting it to "background-color".   You can see that on node id="inner" of the attached (simplified) test case.

Hovering toolbar buttons is switches between padding==border==1px <--> padding==2px, border==0px.   That shouldn't cause a jitter, and especially it shouldn't since neither border nor padding are set as transition-properties.
Comment 1 Bill Keese 2012-07-03 07:01:56 PDT
Created attachment 150602 [details]
simplified test case.   use "remove hover" and "show hover" buttons to show screen jitter around the word "BOLD"
Comment 2 Bill Keese 2012-07-06 17:08:01 PDT
Oh, it's because there are two transition-duration's listed but only one transition-property:

    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s, 0.35s;

Fixing that fixes the problem.

So, mainly a user error.

I'm not sure though what  the "correct" behavior is when those two lengths don't match.

Also, still seems mildly wrong that any setting of -webkit-transition-property and -webkit-transition-duration should cause a screen jitter, unless the padding and border were being changed at a different rate.
Comment 3 Simon Fraser (smfr) 2012-07-06 17:25:09 PDT
(In reply to comment #2)
> I'm not sure though what  the "correct" behavior is when those two lengths don't match.\

The spec says.

> Also, still seems mildly wrong that any setting of -webkit-transition-property and -webkit-transition-duration should cause a screen jitter, unless the padding and border were being changed at a different rate.

Perhaps.
Comment 4 Bill Keese 2012-07-06 17:48:53 PDT
OK.    What's the URL of the spec are you talking about, and what does it say?

I found http://www.w3.org/TR/css3-transitions/#transition-duration-property for transition-property but it didn't say anything about the second parameter.
Comment 5 Simon Fraser (smfr) 2012-07-06 17:55:55 PDT
http://dev.w3.org/csswg/css3-transitions/ has
"In the case where the lists of values in transition properties do not have the same length, the length of the ‘transition-property’ list determines the number of items in each list examined when starting transitions. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn't have enough comma-separated values to match the number of values of ‘transition-property’, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value."