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

DoubleMalt · 2012-11-14T15:04:00Z

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 .

The text was updated successfully, but these errors were encountered:

jaspermdegroot · 2012-11-14T15:16:16Z

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

DoubleMalt · 2012-11-14T17:01:39Z

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 · 2012-11-15T11:33:10Z

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 · 2012-11-15T11:41:05Z

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 · 2012-11-15T12:12:13Z

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 · 2012-11-15T12:52:44Z

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 · 2012-11-15T12:53:37Z

The package I have installed is this:

ii  chromium-browser     22.0.1229.94~r1 i386            Chromium browser

DoubleMalt · 2012-11-15T12:58:40Z

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

gabrielschulhof · 2012-11-15T13:13:48Z

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

gabrielschulhof · 2012-11-15T13:14:30Z

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

gabrielschulhof · 2012-11-15T13:18:50Z

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

gabrielschulhof · 2012-11-15T13:45:08Z

@DoubleMalt

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

DoubleMalt · 2012-11-15T13:49:53Z

@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 · 2012-11-15T13:58:18Z

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

DoubleMalt · 2012-11-15T14:19:33Z

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 · 2012-11-15T19:16:11Z

What function is called when the style element is added?

DoubleMalt · 2012-11-15T19:26:29Z

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 · 2012-12-01T16:08:26Z

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 · 2012-12-01T16:20:31Z

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

DanielRuf · 2012-12-01T16:24:08Z

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 · 2012-12-01T16:27:39Z

jQuery core uses trac for issues. Go to http://bugs.jquery.com

Sent from my iPhone

On Dec 1, 2012, at 11:08 AM, Daniel Ruf notifications@github.com wrote:

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? =(

—
Reply to this email directly or view it on GitHub.

DanielRuf · 2012-12-01T16:30:25Z

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 · 2012-12-01T20:06:51Z

@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 · 2012-12-02T08:34:59Z

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 · 2012-12-02T08:44:51Z

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 · 2012-12-02T11:07:33Z

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 · 2012-12-02T18:00:18Z

I understand where to look for the style element but just don't see it. Not sure what site you mean by "my website".

Daniel Ruf notifications@github.com wrote:

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.

—
Reply to this email directly or view it on GitHub.

DanielRuf · 2012-12-02T18:41:31Z

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 · 2013-03-25T09:00:06Z

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

asantos · 2014-09-30T18:43:19Z

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?

jaspermdegroot closed this as completed Dec 1, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DoubleMalt commented Nov 14, 2012

jaspermdegroot commented Nov 14, 2012

DoubleMalt commented Nov 14, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

DanielRuf commented Dec 1, 2012

arschmitz commented Dec 1, 2012

DanielRuf commented Dec 1, 2012

RedWolves commented Dec 1, 2012

DanielRuf commented Dec 1, 2012

jaspermdegroot commented Dec 1, 2012

DanielRuf commented Dec 2, 2012

jaspermdegroot commented Dec 2, 2012

DanielRuf commented Dec 2, 2012

jaspermdegroot commented Dec 2, 2012

DanielRuf commented Dec 2, 2012

DoubleMalt commented Mar 25, 2013

asantos commented Sep 30, 2014

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

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

Comments

DoubleMalt commented Nov 14, 2012

jaspermdegroot commented Nov 14, 2012

DoubleMalt commented Nov 14, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

gabrielschulhof commented Nov 15, 2012

DoubleMalt commented Nov 15, 2012

DanielRuf commented Dec 1, 2012

arschmitz commented Dec 1, 2012

DanielRuf commented Dec 1, 2012

RedWolves commented Dec 1, 2012

DanielRuf commented Dec 1, 2012

jaspermdegroot commented Dec 1, 2012

DanielRuf commented Dec 2, 2012

jaspermdegroot commented Dec 2, 2012

DanielRuf commented Dec 2, 2012

jaspermdegroot commented Dec 2, 2012

DanielRuf commented Dec 2, 2012

DoubleMalt commented Mar 25, 2013

asantos commented Sep 30, 2014