CODEWITHSUNDEEP
jqueryperformanceinternet-explorerinternet-explorer-9
smartdirt
smartdirt

Reputation: 1037

Animation in IE9 noticibly faster in compatibility mode than standards mode?

So I have a web app that has a lot of moving parts. Most of the parts are moved using jquery. As has been said on stack overflow many, many times, it works much better in Chrome, Firefox or Safari than it does on IE. As a matter of fact it works better on IE7 or IE8 than it does on IE9.

Basically I have an unordered list where all of the list items are initially hidden using display:none. There is also a media player on the page that plays an audio file. As the audio plays the bullets are shown in time using $(".timeable[begin='i']").show() where i is the current time in the audio.

<ul>
  <li class="timeable" begin="1">First Item</li>
  <li class="timeable" begin="5">Second Item</li>
</ul>

Another moving part is a scrub-bar at the bottom that is moved by jquery based on the time as well. There are other things but I wanted to make this as simple for me to explain an others to understand.

Everything functions the scrub-bar moves the lis show at the appropriate time but, when I run IE9 in standards mode the scrub-bar becomes very choppy and the lis are sometimes delayed and don't show at the proper time. If I make IE9 run in compatibility mode, everything works much more smoothly. Also the more lis there are the slower it gets. Any clues as to why?

BTW, I'm sure there will be cries of "not enough information" but maybe you could talk in generalities. But feel free to ask for more questions.

Upvotes: 2

Views: 315

Answers (1)

Glenn
Glenn

Reputation: 11

I cannot answer "why" you are seeing this behavior, however, I also see the exact same sort of issues. In IE9 Compatibility, works fine. In IE9 Normal, very choppy as I animate a division that is collapsing. While collapsing (width going to zero), the dozen+ divisions within the collapsing div start shrinking as expected while the height of all the divs get taller and taller, again as expected, and as the text within the divs are shifted and rendered. It's very choppy.

When I perform the same sort of operation on another page with less inner divs within the collapsing div, the animation is much smoother as expected. The only conclusion is that IE9 is spending considerably time to rerender the text lines based upon natrual breaks (spaces, commas, etc.). So much more time that the animation is outpacing the ability of the engine to rerender causing the choppy display.

Upvotes: 1

Related Questions