Opened 9 years ago

Closed 5 years ago

#11523 closed defect (fixed)

CSS loading race condition

Reported by: ben hockey Owned by:
Priority: high Milestone: 2.0
Component: Dijit Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by ben hockey)

i've attached a test case based on http://docs.dojocampus.org/dijit/layout/TabContainer-examples#left-tabs

there is a problem in the layout of the tabs. i'm not sure if this problem is specific to the tabs since the issue is caused by the browser incorrectly reporting the width of the tablist but to produce the problem, follow these steps:

  • in webkit (chrome/safari) the problem should be seen as soon as you open the page from a clean cache. the initial width reported for the tablist is 1px less than if you cause another call to layout by resizing the window. if the problem is not immediately seen, try using the method outlined below for FF.
  • in FF you have to have this page open when the browser opens. if the browser has already opened and you navigate to this page or if you reload the page, you won't see the issue. the initial width reported for the tablist is 5px less than if you cause another call to layout by resizing the window.

things which i tried that didn't fix the problem (but should be confirmed again):

  • put the link for the stylesheets before the scripts
  • use a local copy of dojo rather than the google cdn
  • use an html5 doctype
  • try a different theme

changing to use 1.4 from the cdn seems to fix the problem - not sure which changes may have caused this but it seems that there isn't any significant differences in dojo.getMarginBox so i'm guessing it was due to some refactoring affecting _LayoutWidget or _TabContainerBase.

Attachments (1)

11523.html (1.6 KB) - added by ben hockey 9 years ago.

Download all attachments as: .zip

Change History (4)

Changed 9 years ago by ben hockey

Attachment: 11523.html added

comment:1 Changed 9 years ago by ben hockey

Description: modified (diff)

comment:2 Changed 8 years ago by bill

Milestone: tbd2.0
Summary: layout problemCSS loading race condition

I've seen similar reports before, and I can reproduce this using your firebug technique. And, as you said, putting tundra.css first doesn't solve the problem, even though according to firebug the tundra.css download finishes before dojo.xd.js.

Maybe in 2.0 we'll be using require() to load in CSS files and then this problem will go away.

comment:3 Changed 5 years ago by bill

Resolution: fixed
Status: newclosed

In our 2.0 prototype we load CSS through require(), so there's no longer any race condition.

Note: See TracTickets for help on using tickets.