New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
4 participants
@cataquil

cataquil commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Sep 25, 2014

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

Member

arschmitz commented Sep 25, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 25, 2014

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.

Member

jaspermdegroot commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cataquil

cataquil Sep 25, 2014

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.

cataquil commented Sep 25, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 10, 2014

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.

Contributor

gabrielschulhof commented Oct 10, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 10, 2014

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.

Contributor

gabrielschulhof commented Oct 10, 2014

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

This comment has been minimized.

Show comment
Hide comment
@cataquil

cataquil Oct 13, 2014

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 commented Oct 13, 2014

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 13, 2014

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.

Member

arschmitz commented Oct 13, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 17, 2014

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

Contributor

gabrielschulhof commented Oct 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 17, 2014

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.

Contributor

gabrielschulhof commented Oct 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 17, 2014

Contributor

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

Contributor

gabrielschulhof commented Oct 17, 2014

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

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Oct 17, 2014

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.

Member

arschmitz commented Oct 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 17, 2014

Contributor

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

Contributor

gabrielschulhof commented Oct 17, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Oct 20, 2014

Contributor

Adding classes a priori seems to have worked.

Contributor

gabrielschulhof commented Oct 20, 2014

Adding classes a priori seems to have worked.

@cataquil

This comment has been minimized.

Show comment
Hide comment
@cataquil

cataquil Oct 21, 2014

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.

cataquil commented Oct 21, 2014

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 added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment