When the demo for 3rd party libraries is run for RequireJS/Backbone with Internet Explorer 11.
There are spaces between the items in the listview.
The only way I have found to get rid of these is to load the 3 main script in the tag
of the page
@cataquil yeah I can confirm thats pretty ugly. We will need to take a look at this but my guess is its a race condition and incorrect dependency declaration if you don't see it without require
There is not just a space between the items but you also see bullets in front of them. They have the browser's default list style. When inspecting the page with the F12 dev tools you do see list-style: none; and margin: 0;, but those rules have not been applied while rendering the page. If you trigger a redraw by unchecking and checking one of the styles the listview looks as expected.
Yes jasper, I noticed this too when playing with the IE Dev Tools. I can only assume it is some bug related to IE, as on Chrome it looks fine. I just wonder how it may look on a Nokia type windows mobile device. I have written my app already, I am just looking now at implementing these more modern approaches. The idea is that the init script loads while jquery.mobile.js has started loading. So although the init.js script is usually listed before the jqm script it still can reference $.mobile.
It seems that requirejs is more based on the sequential loading of scripts. I did have some scripts loading from CDN. I moved them all local and tried it as well as tried different arrangements of the main require loader function. I was thinking I could do a listview('refresh') somewhere to ensure it look correct.
Frankly I am just getting my head around requirejs, and already there is browserify and the UMD standard. Perhaps I will just work on getting to work with backbone then think about require later.
There's a race condition, alright. On my local setup, when I go to demos/backbone-requirejs/ and I click to open the demo, the listview isn't even enhanced. OTOH, if I refresh the requirejs demo page, it /is/ enhanced.
All I can think of is that listview loads before page, meaning it won't get registered by autoinit, which is currently located in the page widget.
@arschmitz's new autoinit should fix this.
Thanks gabrielschulhof, but I am looking thru arschmitz's repos and I do not see this. Can you tell me where to look for this?
@cataquil its not something that could just be dropped into jqm currently its a replacement for the current autoinit that will be in 1.5 it has the benefit of being load order independent. It's actually only in a gist right now but will be landing on master within the next week or so.
Build: Modify load order to ensure page loads before any of the widgets
sigh ... the load order fix prevents the demo from sometimes not becoming enhanced, but it does not prevent the original problem. It seems that that's an IE11 rendering bug :(
If you open IE11 developer tools, and uncheck the border-top-left-radius CSS rule for li.ui-first-child > a.ui-btn and then re-check it, the bullet disappears. The same thing happens for the rule li.ui-last-child > a.ui-btn when you uncheck/check the border-bottom-left-radius CSS rule.
@jaspermdegroot do you think you can find a way around this?
Iv seen other similar rendering issue on IE before and never been able to work around because everything is correct the browser just does not repaint it properly for some reason.
@arschmitz I'm trying to add all the classes a priori. Lesse if that works.
Adding classes a priori seems to have worked.
I am not too familiar with the inner workings of jqm, although I know you can put classes on div tags instead of using the data- attributes. Can you give an example of this? A gist would be fine.
Demos: Add backbone demo listview classes a priori