Databases
StackOverflow2013
Postsdbo
POHow to stop IE from redrawing while updating many elements
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to stop IE from redrawing while updating many elements
    text
    copied!<p>I have a page with many divs that are laid out in a grid. Each div has text in it. I want the text to be just big enough to fill the div. I do this by increasing the text size until I detect that the div has scrolled, and then go back, as per this answer:</p> <p><a href="https://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container">Auto-size dynamic text to fill div</a></p> <p>This works really well on most browsers, including mobile ones, but on IE10 it is very slow. You can actually watch it making the text smaller. I am guessing that it is doing some kind of window-wide layout operation each time the font size changes.</p> <p>Any idea how to suspend the redraw until all of the divs are done or otherwise improve performance?</p> <p>Here is a simple fiddle showing the technique. Just imagine this with about 50 divs on the page. Instant in Chrome, takes several seconds in IE10:</p> <pre><code>(function($) { $.fn.textfill = function(options) { var fontSize = options.maxFontPixels; var ourText = $('span:visible:first', this); var maxHeight = $(this).height(); var maxWidth = $(this).width(); var textHeight; var textWidth; do { ourText.css('font-size', fontSize); textHeight = ourText.height(); textWidth = ourText.width(); fontSize = fontSize - 1; } while ((textHeight &gt; maxHeight || textWidth &gt; maxWidth) &amp;&amp; fontSize &gt; 3); return this; } })(jQuery); $(document).ready(function() { $('.jtextfill').textfill({ maxFontPixels: 200 }); }); </code></pre> <p>jsfiddle: <a href="http://jsfiddle.net/pRJdY/" rel="nofollow noreferrer">http://jsfiddle.net/pRJdY/</a></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