{"id":282,"date":"2007-11-23T05:48:04","date_gmt":"2007-11-23T12:48:04","guid":{"rendered":"http:\/\/css-tricks.com\/avoid-css-jitter\/"},"modified":"2007-12-04T09:43:40","modified_gmt":"2007-12-04T16:43:40","slug":"avoid-css-jitter","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/avoid-css-jitter\/","title":{"rendered":"Avoid “CSS Jitter”"},"content":{"rendered":"

With more power, comes more responsibility.<\/h3>\n

One of the things that CSS allows you to control is the hover state of many objects, most notably, anchor (<a>) elements. Typically, the hover state is styled with color changes, or perhaps something a bit fancier like a background-image change (or a background-position change re: CSS Sprites<\/a>).<\/p>\n

But that’s not all you can change. Just as easily, you are able to change font-weight, margin, padding, or literally height and width if you are dealing with a block-level element. Changing any of these things on hover is entering dangerous territory<\/strong>. <\/p>\n

Why dangerous? Because you are changing the clickable region of the element. If the new clickable region is positioned such that the cursor falls outside of it, the hover event will trigger off and revert to it’s default styling, which will change the clickable region again, which will cause your cursor to be inside of it again, which will change the styling again, which will….. You get it, “CSS Jitter”.<\/p>\n

“CSS Jitter” can happen any time you change the size of an object on hover.<\/h3>\n

It’s as simple as that. If you want to avoid CSS Jitter, don’t style the hover states of objects to change size in any way.<\/p>\n

There are some examples where changing the size is safe. Basically if the clickable area becomes bigger on rollover in all directions<\/strong>. For example, bolding text on rollover. Since the boldness will cause the object to become bigger in all directions, you will never trigger a jitter. However if you did the opposite, unbolded text on rollover, the clickable area would become smaller and almost certainly trigger jitter.<\/p>\n

Here are some hover styles that could trigger “CSS Jitter”<\/h2>\n