dijit toolbar hover resize bug in Chrome

[Matt Lauer]

Some hover style/class is causing Chrome to resize and/or move Buttons when you hover over them. It is a small bug, but something that should likely be addressed.

Test here: ​http://download.dojotoolkit.org/release-1.7.2/dojo-release-1.7.2/dijit/tests/test_Toolbar.html

This doesn't seem to affect IE, FF, or Safari. I'm using Win7 + Chrome 20.

[bill]

Interesting. I see a glitch not when you hover, but when you start hovering or stop hovering. Somehow webkit-transition-property is computed to all, even though dijit sets it to background-color, and thus we are seeing animations of border width / padding.

[bill]

I filed ​https://bugs.webkit.org/show_bug.cgi?id=90458 against webkit.

I could probably find a workaround, like using border-color: transparent on non-hovered buttons, rather than increasing padding and setting border-width to 0, but let's see if webkit comes up with a fix quickly.

[bill]

PS: probably the simplest workaround is to set -webkit-property-duration for .dijitButtonNode to 0.

[DrCJones]

Thanks for the workaround. I noticed that -webkit-transition-duration was being improperly set, something like "-webkit-transition-duration: .3s, .3s;". So I added the following to my site.css and it took care of the issue. Good temporary fix until Chrome team takes care of this.

.dijitButton, .dijitButtonNode {

-webkit-transition-duration: 0s, 0s !important;

}

[bill]

Oh, it's because there are two transition-duration's listed but only one transition-property:

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

Fixing that fixes the problem.

[bill]

In [29153]:

code was incorrectly listing two transition-durations even though there was only one transition-property, fixes #15599.

[bill]

#15723 is a duplicate of this ticket.