Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#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 7 years ago by bill

Component: GeneralDijit
Owner: set to 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.

comment:2 Changed 7 years ago by 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.

comment:3 Changed 7 years ago by bill

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

comment:4 Changed 7 years ago by 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;

}

comment:5 Changed 7 years ago by bill

Milestone: tbd1.8
Status: newassigned

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.

comment:6 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

In [29153]:

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

comment:7 Changed 7 years ago by bill

#15723 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.