deviceTheme - CSS import can be unsafe

[Ming Zhe Huang]

The deviceTheme.js will insert CSS files, according to the client user-agent.

However, such kind of insertion can be unsafe when loading the web application. The imported CSS files are loaded asynchronously and parallel to the JavaScript? files being loaded. That means CSS files can be loaded after the JavaScript? files are loaded and executed. If the CSS styles are applied after the layout in dojo mobile is finished, then the layout could be screwed up. This bug is not easy to reproduce, depending on the network status.

Please see the attached test html. You can use fiddler to intentionally delay the loading of iPhone.css, letting it be the last resource loaded, e.g. simulate a slow network speed. You'll find the layout of the loaded web page is not correct.

[Ming Zhe Huang]

test HTML

[Ming Zhe Huang]

video record

[ykami]

Yes, you are correct. There is a possibility that loading of CSS may not finish before widget initialization starts. But basically that's the way it works. So, if you use deviceTheme, your application needs to render correctly even if styles are applied after the initialization. Another (possible) workaround is to have a separate <script> block for loading deviceTheme in the sync mode as follows.

<script language="JavaScript" type="text/javascript">
    dojo.require("dojox.mobile.deviceTheme");
</script>
<script language="JavaScript" type="text/javascript">
    dojo.require("dojox.mobile");
    ....

See test_SpinWheelDatePicker-sv.html for complete example.