Opened 8 years ago

Closed 8 years ago

#13429 closed defect (wontfix)

deviceTheme - CSS import can be unsafe

Reported by: Ming Zhe Huang Owned by: ykami
Priority: high Milestone: 1.7
Component: DojoX Mobile Version: 1.7.0b1
Keywords: Cc:
Blocked By: Blocking:

Description

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.

Attachments (2)

testDeviceTheme.html (4.6 KB) - added by Ming Zhe Huang 8 years ago.
test HTML
testDeviceTheme2.zip (179.1 KB) - added by Ming Zhe Huang 8 years ago.
video record

Download all attachments as: .zip

Change History (3)

Changed 8 years ago by Ming Zhe Huang

Attachment: testDeviceTheme.html added

test HTML

Changed 8 years ago by Ming Zhe Huang

Attachment: testDeviceTheme2.zip added

video record

comment:1 Changed 8 years ago by ykami

Milestone: tbd1.7
Resolution: wontfix
Status: newclosed

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.

Note: See TracTickets for help on using tickets.