Button Glitch when Published


#1

FlashAssociatedWthFocus.rp (50.2 KB)

Hi everyone,

I notice when I publish any buttons with a focus state it creates a weird glitch. The button expands outwards/flashes on mouse down (hard to describe!). It looks bad when presenting mockups and is happening across all browsers. It seems to only happen the first time on mouse down and then corrects itself. I thought it might be to do with the border expanding on hover to create a grow effect but even when I removed that it was still happening, definitely seems to be associated with the focus state.

Wondering if anyone has encountered this issue or would know how to solve it?

Have attached a file above.

Any help would be greatly appreciated!


#2

You could submit a bug report to support@axure.com …although I would not expect a fix for this in RP9 (…or even RP10, but who knows?)

If I change the page background to the default white I don’t see the flash.

If I set a Selection style (e.g., to different fill color) and Click or Tap to toggle selection state, I don’t see the flash.

If I change your interaction styles to only change fill properties, or only line properties, or seemingly anything that doesn’t involve changing border thickness or outer shadow–thus does not change the overall dimensions of your button–I don’t see the flash.

Some potential workarounds for this which retain your current visuals:

  • Create a dynamic panel from your button, with at least one state for your default style (State 1) and one state for your focused style (e.g., State 2). Either remove the Focused Style property from the default, or don’t change any style properties relative to default. Use the Got Focus event of the dynamic panel (or button widget in State 1) to change the dynamic panel state to State 2, and the Lost Focus event to change it to State 1.

  • Duplicate your button widget, name it something, e.g., successBtnFocused, remove all interaction styles from the duplicate and style it identical to your Focused Style. Place it behind your button and in same location, then hide it. Use the first button’s Got Focus to show the duplicate, and Lost Focus to hide the duplicate. Delete the Focused Style from the first button (or change the styling so it matches the default.)

  • Don’t use any Focused styling, and rather use Selected Style. I’m curious why you are even using/styling Focus for button widgets…it is rare to need it, and can be difficult to control. I’ve only found it useful when dealing keyboard tab navigation and Text Fields/Areas, and/or screen readers. Also maybe for prototypes used for specification, where a dev team requires it for specs (in which case, should be easier to just tell them to ignore any initial flashes.)