StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Matt,</p> <p>From what I've tested on your JSFiddle code, this is a bug in Internet Explorer 10. What appears to be happening is that IE10 does as your JavaScript code says and slides the element out. However, it does so in a way that it does not initiate a redraw of the <em>parent</em> of the <em>parent</em> element at each frame of the animation, which causes the current frame to be drawn on top of the previous frame, thus giving it the jagged look. Basically, it doesn't erase the previous frame of the element with id <code>app_cont</code> and it draws over it after changing the css properties of the child element <code>hid_div</code> to make it appear to be sliding out. I would imagine that this would be discovered by Microsoft soon and fixed in some sort of update for IE10.</p> <p>However, in case it isn't fixed any time soon, the best workaround to fix this (in my opinion) would be to <em>not</em> use Jquery for sliding out the element and instead make your own "raw" JavaScript function to increment the height property over a certain period of time. Below are links to two Youtube videos that do what I suggested, and after trying the code in IE10, it seemed to be working fine -- meaning no jagged edges. I would suggest watching both so you get a thorough understanding of this concept.</p> <p>I tried to post the code from the two Youtube tutorials on JSFiddle, but for some reason it didn't work (but I tested it out for real with IE10 and it worked fine). The source code for the tutorials is available in the descriptions for the videos.</p> <p>One thing that you will have to do different, however, is to change the height of <em>two</em> elements at the same time; the first being the div with id <code>hid_div</code> and the second element being the parent div with id <code>app_cont</code>. If you can understand those tutorials thoroughly, though, it shouldn't be challenging at all. The reason you have to change the height of the <code>app_cont</code> div is because that will force a redraw each frame for that element, thereby eliminating the jagged edges.</p> <p><a href="https://www.youtube.com/watch?v=1tGtL6upTEU" rel="nofollow" title="Youtube tutorial">Fade Tutorial</a></p> <p><a href="https://www.youtube.com/watch?v=byBk8z_FqTs" rel="nofollow" title="Youtube tutorial">Slide Out Tutorial</a></p> <p>Thank you for asking your question, tcs08</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload