Internet Explorer Listview spaces when loading scripts libraries with RequireJS #7719

Closed
cataquil opened this Issue Sep 25, 2014 · 14 comments

Projects

None yet

4 participants

@cataquil

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

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script src="/scripts/appinit.js"></script> <script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
@arschmitz
Member

@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

@arschmitz arschmitz added the Demos label Sep 25, 2014
@arschmitz arschmitz added this to the 1.4.5 milestone Sep 25, 2014
@jaspermdegroot
Member

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.

@cataquil

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.

@gabrielschulhof
Contributor

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.

@gabrielschulhof
Contributor

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.

@cataquil

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?

@arschmitz
Member

@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.

@gabrielschulhof
Contributor

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 :(

@gabrielschulhof
Contributor

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.

@gabrielschulhof
Contributor

@jaspermdegroot do you think you can find a way around this?

@arschmitz
Member

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.

@gabrielschulhof
Contributor

@arschmitz I'm trying to add all the classes a priori. Lesse if that works.

@gabrielschulhof
Contributor

Adding classes a priori seems to have worked.

@cataquil

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.

@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@gabrielschulhof @agcolom gabrielschulhof + agcolom Demos: Add backbone demo listview classes a priori
Closes gh-7782
Fixes gh-7719
22b4545
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment