Bug 18042 - <link> elements to CSS files and <style> elements appended by Javascript don't take effect
Summary: <link> elements to CSS files and <style> elements appended by Javascript don'...
Status: RESOLVED DUPLICATE of bug 5476
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2008-03-24 01:38 PDT by Yuzhu Shen
Modified: 2008-04-25 08:59 PDT (History)
1 user (show)

See Also:


Attachments
A snapshot of problem on qzone.qq.com (230.05 KB, image/jpeg)
2008-03-24 01:40 PDT, Yuzhu Shen
no flags Details
The patch for this bug. (4.55 KB, patch)
2008-03-24 03:02 PDT, Yuzhu Shen
hyatt: review-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Yuzhu Shen 2008-03-24 01:38:58 PDT
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.
Comment 1 Yuzhu Shen 2008-03-24 01:40:14 PDT
Created attachment 20003 [details]
A snapshot of problem on qzone.qq.com
Comment 2 Yuzhu Shen 2008-03-24 03:02:12 PDT
Created attachment 20005 [details]
The patch for this bug.
Comment 3 Dave Hyatt 2008-04-25 08:58:55 PDT
Comment on attachment 20005 [details]
The patch for this bug.

This patch would wreck performance by crawling the entire HTML file looking for stylesheets.
Comment 4 Dave Hyatt 2008-04-25 08:59:17 PDT
Also, this bug is a dup.




*** This bug has been marked as a duplicate of 5476 ***