IE10 Repaint/Redraw issue

Question

You can see this working/breaking here: http://new.campchampions.com/parents

The issue only crops up in IE10. After the user has scrolled a little ways, the navigation becomes pinned (a class of fixed gets added to the body which effects the hgroup.primary(I know, I know hgroup is not a 'thing' anymore. Don't judge me.)). If you go back to the top of the page, it un-pins, goes back to normal.

In IE10, when you go back up to the top of the page, the nav elements disappear until the mouse moves up over ANY part of the yellow bar. It's driving me nuts.

I've attempted things like having JS append/alter content in various elements on scrolltop/un-pinning the navigation.

I've got a brief youtube video showing the issue: http://youtu.be/-itTC_j-9YE

Any thoughts, or ideas? That'd be great. Thanks!

Answer 1

While I have no solid answer for the reason behind this redraw issue, I found that an instantaneous jQuery hide/show redrew the element completely without any visible side effects.

Using a non-jQuery JS hack to add a class to the HTML element in IE10 (see Willem de Wit's answer to this quandry), I made sure this code only fired on IE10.

if($('html').hasClass('ie10')) {
  $('.primary').hide(0, function(){$(this).show()});
}