-webkit-transition-property wrong computed value, causes screen jitter

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Bill Keese]

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.

[Bill Keese]

Created attachment 150602 [details]
simplified test case.   use "remove hover" and "show hover" buttons to show screen jitter around the word "BOLD"

[Bill Keese]

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.

[Simon Fraser (smfr)]

(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.

[Bill Keese]

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.

[Simon Fraser (smfr)]

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."

[Brent Fulgham]

This does not appear to be a problem in modern Safari.