#15599 closed defect (fixed)
dijit toolbar hover resize bug in Chrome
Reported by: | Matt Lauer | Owned by: | bill |
---|---|---|---|
Priority: | undecided | Milestone: | 1.8 |
Component: | Dijit | Version: | 1.7.2 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
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.
Change History (7)
comment:1 Changed 10 years ago by
Component: | General → Dijit |
---|---|
Owner: | set to bill |
comment:2 Changed 10 years ago by
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.
comment:3 Changed 10 years ago by
PS: probably the simplest workaround is to set -webkit-property-duration for .dijitButtonNode to 0.
comment:4 Changed 10 years ago by
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;
}
comment:5 Changed 10 years ago by
Milestone: | tbd → 1.8 |
---|---|
Status: | new → assigned |
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.
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.