0

Update #2:

I managed to limit the number of re-paints by using the Chrome Timeline tool (thank you @iambriansreed for the suggestion). This limitation seemed to solve the problem (will add answer below), or at least make it so infrequent that it's no longer an issue.

However, it still does a "Layout" render whenever I modify the innerHTML of an element (which is a lot with the plugin I am writing). I tried making it position: fixed while I am modifying it (since that won't affect anything else in the layout except for itself), but it doesn't seem to make any difference.

Update #1:

It is not the .onload function in particular that is causing this... it also happens on document.ready. I think this is what is happening:

  1. document.ready fires
  2. for loop
    1. alert out the width (correct)
  3. window.onload fires
  4. for loop
    1. alert out the width (sometimes correct, other times 0)
    2. "cut up divs"
    3. repaint

Does anyone have any idea on how to detect when a repaint is happening so that I don't query it at that moment? (P.S. why does IE not "pause" while it paints?!)

On $(document).ready(...) I run through a for loop twice and alert out the body's width ($('body').width();) each time through. I get a value I would expect (ex. 1092).

On $(window).on('load', ...) I run through another for loop twice, also alerting out the body's width each time through. I get 0 the first time through (and the page looks completely blank behind the alert), and then a value I would expect the second time through (ex. 1092).

This is an issue I am not able to replicate in a stripped-down example, nor any other browser (Chrome, Safari, Firefox, IE9, IE10).

Does anyone have any ideas, or other things that I could test for?

I am using $(window).on('load', ...) to cut up some divs based on their width, which is based on their font size, which is based on a webfont (which isn't necessarily loaded by the time $(document).ready(...) fires).

allicarn
  • 2,859
  • 2
  • 28
  • 47
  • I'm assuming behaviour is in IE10 when using IE8 browser mode; look at the network tab of the dev. tools and see if IE8 is loading in something else (e.g. a stylesheet) after the `alert` has been okay'd, which happens before it in other browsers. – Paul S. Oct 23 '13 at 22:02
  • Behaviour is only in actual IE8. The emulators in IE10 and IE9 do not show this issue. The stylesheets were loaded already - I could see the styles applied in the `$(document).ready` alerts. It's like on `$(window).load` it "repaints" as I'm trying to get the widths. – allicarn Oct 24 '13 at 12:09
  • Also note I tried using the native `window.onload = function() {...}` per [this answer](http://stackoverflow.com/a/17733632/738394) but had the same problem. – allicarn Oct 24 '13 at 12:41
  • 1
    what doctype do you use? http://stackoverflow.com/questions/13371593/ie-body-width-not-working also check this answer: http://stackoverflow.com/a/9410162/169714 – JP Hellemons Oct 24 '13 at 13:20
  • http://stackoverflow.com/questions/7006152/how-do-we-investigate-how-many-times-a-browser-is-doing-reflows – iambriansreed Oct 24 '13 at 13:22
  • @jp-hellemons ` ` – allicarn Oct 24 '13 at 13:35

2 Answers2

0

I has a similar issue, and I found that using innerWidth() instead works in all browsers. 

jQuery('body').innerWidth();
Tasos K.
  • 7,979
  • 7
  • 39
  • 63
  • Still the same problem. Besides, I need the width without padding. `innerWidth()` [returns padding + content area](http://api.jquery.com/innerWidth/) while `width()` [returns only the content area](http://api.jquery.com/width/) – allicarn Oct 24 '13 at 12:12
0

I managed to limit the number of re-paints by using the Chrome Timeline tool (thank you @iambriansreed for the suggestion). This limitation seemed to solve the problem, or at least make it so infrequent that it's no longer an issue.

allicarn
  • 2,859
  • 2
  • 28
  • 47