1 pixel shift right for hover state shape box

Aug 26, 2015

Hi folks. I have an odd little glitch that I was wondering if anyone else has encountered - and more importantly resolved. :)

I have an image that I am using as a button and when the user hovers over it a shape animates into view with the button label text in it and then fades away once the mouse moves away. It all works well and looks nice.

However, if the user hovers over the image button,  the text shape rollover reappears but then shifts (perceptibly) by one pixel to the right. It will fade on hover-out but always reappear in the new position each time there is a hover over.

If the user keeps doing this then the text shape will eventually shift off screen.

It happens even if the shape has no text in it.

I have searched the discussions but cannot seem to find anything similar. I'm actually at a loss at how to phrase the problem succinctly.

Any help would be greatly appreciated. It's not a major concern but it's a glitch I have noticed and would love to know why the object "jumps" every time it is animated.

7 Replies
Diarmaid Collins

Hi Valeta,

Wow, yes, four years... it really doesn't seem that long ago, being honest.

Here is what Matt emailed me after I sent him on the file:

That glitch is occurring because part of the shape is off the screen.

There are two ways you can fix it:

  1. Resize the shape that appears behind the name on hover so that it fits within the screen, or 
  2. Copy the shape from the hover state to the normal state, then make it transparent (no fill or border). 

It's also worth letting Articulate support know about the issue and how you resolved it so that they can fix it in future updates.


I used his second suggestion and it solved my issue.