View Full Version : IE doesn't redraw until mouse move

11-19-2010, 04:12 PM
Hi all, I'm having a serious issue with IE7 and IE8. I have a sliding view in javascript. Basically, the user clicks a right arrow and the current view slides left out of view and the new view comes in from the right. Sounds simple enough, I used jQuery. Works perfect in EVERYTHING except IE.

When you click the arrow to trigger the slide, nothing happens until you move your mouse. When you move the mouse, the new view just appears. You rarely any sliding movement @ all. I saw the bug about IE and drawing image backgrounds slowly, I tried removing the background to no avail.

Have a look @ the attached image.

11-20-2010, 07:55 AM
Can we have a link to your page?

11-22-2010, 06:10 PM
Sure here's a link...

Some quick instructions... hover over the "Main Menu" and a bar will slide out... click on the ">" arrow to enter one of the folders... say "Test Folder 1" or "Test Folder 2". In Firefox, the contents of the folder will slide into view quite nicely. In IE, not so.

Further more, add a layer by clicking the "+" icon. Then hover over "1 Layer" @ the bottom right hand corner.. when the window slides in. Click the ">" arrow once again to see the IE failure.

11-23-2010, 04:05 PM
Any ideas on this?

06-22-2011, 12:03 PM
Hey, I know this is a bit of an old thread, but I stumbled across it after having a similar problem, but then realised I already knew how to solve it, so I thought I'd post it up for reference.

IE uses an internal property on DOM elements called hasLayout. Things that "have" layout tend to get drawn correctly, whilst things that do not, don't. I'm not sure why they (the IE dev team) thought this was a good idea, or the technical ins and outs of why/how it works (or doesn't!).

Any redraw/oddly behaving layout issues like this can usually be fixed by causing the relevant DOM object to "have" layout. There are a few ways of doing this, but the easiest I've found is to specify a zoom CSS property for all elements (another proprietary IE thing, other browsers will ignore it).

Within my reset.css, I have the following: (note the zoom: 1; at the bottom)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
zoom: 1;

This will generally remove oddities and redraw issues.