why might a css .hover div be “blipping”?

Question

I have a few "tabs" on my site (containing text), and when hovered, the tabs expand and show more text. For our intents and purposes, the tabs are a menu of sorts.

The problem though is that when moused over, the tab expands properly as the hover should make it do, but then very quickly "blips" back to its original size, then instantly back to its hover size (as long as the mouse is still over the original div). It happens like this: user hovers and tab expands / (with mouse still on tab) tab maintains .hover properties for around 1 second / (with mouse still on tab) tab defaults to original properties for maybe 1/10th of a second / (with mouse still on tab) tab returns to .hover properties for around 1 second.
And this continues for the duration the mouse is over the tab.

I'm experiencing this almost all the time in Chrome, sometimes in Safari, and least frequently, almost never, but still sometimes in FF.

I cleared the cache, cleared browsing data (cookies and other site and plug-in data) and still no improvement. I then checked my computer for updates, re-started it, and still the same problem. I have over 6 GB of free memory too, running on a 2.5ghz dual core processor.

Any ideas what the problem could be and how to solve it?

thanks!

Answer 1

If the element that gets shown on :hover moves the surrounding elements or change the affected element's size it can result in your mouse not longer pointing on the original element, thus removing :hover. Since all elements will move again it will result in the :hover effects shown.

This will result in blipping until a stable :hover condition is achieved. Note that some browsers will check :hover only on mouse movement, not on layout change (FF).

To prevent such behavior you shouldn't change the layout of your website on :hover, or use absolute positioning to prevent those elements from effecting other elements.

Examples

Unstable version

#blipper {
  position: absolute;
  width: 200px;
  border: 1px solid;
  background-color: #ccc;
}

#blipper:hover {
  left: 150px;
  /* the hover effect is only stable in the rightmost 50 px */
}

<div id="blipper">Hover me</div>

Stable version

#blipper_stab {
  /* fixed layout element wrapper */
  width: 200px;
  height: 2em;
  /* needs height, since it contains only `position:absolute` elements*/
  position: relative;
  border: 1px solid green;
}

#blipper {
  height: 2em;
  position: absolute;
  width: 200px;
  border: 1px solid;
  background-color: #ccc;
}

#blipper_stab:hover #blipper {
  /* now based on the wrapper instead of the */
  left: 150px;
  /* blipper */
}

<div id="blipper_stab">
  <div id="blipper">Hover me</div>
</div>