Skip to content

jQuery mobile 1.2.0 creates an empty style element between head and body or after body thus rendering the html invalid #5285

Closed
DoubleMalt opened this Issue Nov 14, 2012 · 30 comments

7 participants

@DoubleMalt

When you look at a the source of a rendered jQueryMobile site it will be of the structure

<html>
  <head>...</head>
  <style type="text/css"><style> 
  <body>..</body>
</html>

or (more often)

<html>
  <head>...</head>
  <body>..</body>
  <style type="text/css"><style> 
</html>

I could not pinpoint where this stray style element stems from but my best guess is the $.mobile.media function on line 2006 from jquery.mobile-1.2.0.js .

@jaspermdegroot
jQuery Foundation member

@DoubleMalt - On which OS/browser? Do you see it when you check this page http://jquerymobile.com/test/ ?

@DoubleMalt

Sorry for omitting the details.

OS: Ubuntu 12.10

Browsers:

Chromium:

Chromium    22.0.1229.94 (Developer Build 161065) Ubuntu 12.10
OS  Linux
WebKit  537.4 (trunk@124835)
JavaScript  V8 3.12.19.15

Firefox

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:16.0) Gecko/20100101 Firefox/16.0

Both show this phenomenon.

I also checked on http://jquerymobile.com/test/ . The page shows this behavior every time.

@gabrielschulhof

Hey! I can't reproduce this problem with a fresh installation of Ubuntu and Chromium Version 22.0.1229.94 Ubuntu 12.10 (161065) or with Firefox 16.0.1 which comes with it.

I can see how the line you mention might result in an invalid page, but only if, at the end of that function, the fake body is not removed from the page.

@gabrielschulhof

I can't reproduce it on Firefox 16.0.2 either. That's the version that was installed after I allowed it to install the updates it said were available.

@DoubleMalt

Can't reproduce it on Firefox.
But successfully reproduced it on Chrome just now. Also stays after refresh of the page.

Screenshot on http://share.doublemalt.net/misc/Screenshot-jquery-1.2-chrome-misplaced-styleelement.png

@gabrielschulhof

OK. Chrome or chromium-browser? What exactly is the browser that you captured in your screenshot? What is the Ubuntu package name that contains it and which repository do I grab it from?

@gabrielschulhof

The package I have installed is this:

ii  chromium-browser     22.0.1229.94~r1 i386            Chromium browser
@DoubleMalt

doublemalt@cobra:~$ apt-cache policy chromium-browser
chromium-browser:
Installed: 22.0.1229.94~r161065-0ubuntu1
Candidate: 22.0.1229.94~r161065-0ubuntu1
Version table:
*** 22.0.1229.94~r161065-0ubuntu1 0
500 http://at.archive.ubuntu.com/ubuntu/ quantal/universe amd64 Packages
100 /var/lib/dpkg/status

@gabrielschulhof

Very weird. I have the exact same version, except i386.

@gabrielschulhof

I'm not sure I can emulate an AMD64 processor :)

@gabrielschulhof

It does seem though that I can emulate a 64-bit processor in VirtualBox ... let's see if that works.

@gabrielschulhof

@DoubleMalt

Can you please check the console if there are any error messages?

@DoubleMalt

@gabrielschulhof
There are no messages on the console. And it seems the codelines I pointed are not the culprits as I tried out a non-CDN non minified version of the js file with my web application where I noticed the phenomenon.

I commented out the block and just returned true, still the style element was there floating around ... sometimes before, sometimes after the body element.

I did not find any indication of a style element added to the dom tree in the source code :(

@gabrielschulhof

OK, this is totally weird. I can't reproduce it with my emulated amd64 version of Ubuntu 12.10 either.

@DoubleMalt

With the help of the livequery I was able to display it as a grey box in the middle of my screen, but I can't find out which function adds it to the tree because I don't have access to that information in the function that is called when the style element is added ...

@gabrielschulhof

What function is called when the style element is added?

@DoubleMalt

I could not find out unfortunately.

I used
$("style").livequery("load", function(event){...});
with the https://github.com/brandonaaron/livequery plugin.
But it does not give me context of how the element appeared in the tree ...

@DanielRuf

Also have the same problem but with jQuery (1.8.3). I am not using jQuery Mobile.

Also, why is there no issues tab on the jquery repo? =(

@arschmitz
jQuery Foundation member

@DanielRuf Jquery tracks bugs at http://bugs.jquery.com/newticket also if this can be reproduced without jqm then it should be closed

@DanielRuf

Well why not issues for jQuery here on github but for jQuery Mobile?

Seems for me very inconsistent =( But can we keep it open to reference later to a fi or solution so we can keep track of this issue / problem?

@RedWolves
jQuery Foundation member
@DanielRuf

And why not jQuery Mobile or everything on Github (wich would be much better?) Well I dont understand this but ok =) But please keep this issue open for any news regarding this issue.

@jaspermdegroot
jQuery Foundation member

@DanielRuf

Thanks for your comment. Out of curiosity, on what OS/browser did you see the issue?

We weren't able to reproduce this issue at all and now you reproduced it without jQuery Mobile we can conclude that this is not bug in the Mobile framework.

It could be a bug in jQuery core so please file a bug report at the core issue tracker. When jQuery core was launched Github didn't exist yet. Moving an issue tracker is a lot of work and the history will be lost. So I guess that is the reason why they still use Trac. I don't know if there are plans to change this.

Please post a link to the jQuery core ticket in a comment here, so people that experience the same problem can read updates there. Since this seems to be something we can't fix at our end I am closing this ticket.

@DanielRuf

I am using Win 7 64bit and latest stable google chrome version. We could need sometimes a debug version of jquery printing this information to the console eg with platform.js

Can someone create the bugreport for me?
Well but jquery is also here but without the issues tab ;-)

@jaspermdegroot
jQuery Foundation member

Tested again on Win7/Chrome and Ubuntu 12.4/Chromium, but still don't see the issue.

@DoubleMalt - Can you reproduce it without jQuery Mobile as well?

@DanielRuf

You have to look at the elements/html view tab of the developer tools in chrome. Take a look at my website and use the tab in the developer tools then you can see it.

It is an issue of jquery core not mobile so yes.

Regarding your "super awesome"trac: http://bugs.jquery.com/ticket/12988. Never had any problems like this with github issues ;-)

@jaspermdegroot
jQuery Foundation member
@DanielRuf

Take a look at daniel-ruf.de (there is also a link to it on my github profile where many people have their website added to their information, you too ;-) )

@DoubleMalt

Can also confirm it is a jQuery issue nothing to do with JQuery mobile specifically.

@asantos
asantos commented Sep 30, 2014

Kind of late here, but I'm having the exact same issue as @DoubleMalt with Chrome Version 37.0.2062.124 in Mac OSX 10.9.3 - this issue actually happens on all major browsers except Firefox. Any ideas?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.