Question

I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.

I’ve created a fiddle that can replicate the issue.

http://jsfiddle.net/T8LvA/63/

When you rollover the red box the width of the parent is animated to reveal more of the red box.

You may need to adjust the width of the html pane several times before you see the wobble,

Any thoughts on how best to resolve this?

Thanks

Answer 1

Use float:right instead of positioning it absolutely.

http://jsfiddle.net/T8LvA/70/

It happens because when you change the width, it extends to the right – then it’s reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.

To clarify: you’ll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.