If a <link> element pointing to a css file is appended as a child of <body> by Javascript, it doesn't take effect in WebKit while it does in other browsers (IE7, FF2/3 are tested). Since WebKit only checks <link> elements in <head> for style sheets, this css file is ignored. For example, the test.css file is ignored below. ========================================= <html> <head></head> <body> <script type="text/javascript"> var css_obj=document.createElement('link'); css_obj.id='test_css'; css_obj.rel='stylesheet'; css_obj.type='text/css'; css_obj.media='screen'; css_obj.href="test.css"; document.body.appendChild(css_obj); </script> ... </body> </html> ========================================= It should be noted that <link> elements directly specified in <body> will NOT be ignored in WebKit: ========================================= <html> <head></head> <body> ... <link id="test_css" rel="stylesheet" type="text/css" media="screen" href="test.css" /> ... </body> </html> ========================================= That is because during the parsing phase, WebKit adds the <link> element as the child of <head>. Appending a <sytle> element by Javascript also has the same problem. This problem affects a very popular Chinese Website: 1. Go to: http://qzone.qq.com 2. On top right, there is a link "怬" (means login). Click on it and a login dialog should show up. 3. In Safari, the dialog is transparent. While it works fine in IE7, FF2/3.
Created attachment 20003 [details] A snapshot of problem on qzone.qq.com
Created attachment 20005 [details] The patch for this bug.
Comment on attachment 20005 [details] The patch for this bug. This patch would wreck performance by crawling the entire HTML file looking for stylesheets.
Also, this bug is a dup. *** This bug has been marked as a duplicate of 5476 ***