CSS source maps not applying to dynamically injected <style>
Reported by
guybedf...@gmail.com,
Sep 23 2016
|
||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Steps to reproduce the problem:
When injecting CSS dynamically through JS into a <style> tag via innerHTML with code like:
```
(function(c){if (typeof document == 'undefined') return; var d=document,a='appendChild',i='styleSheet',s=d.createElement('style');s.type='text/css';d.getElementsByTagName('head')[0][a](s);s[i]?s[i].cssText=c:s[a](d.createTextNode(c));})
(".red,body{color:red}body{background-color:red}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1peGluLmxlc3MiLCJ0ZXN0Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsS0NJQSxLREhFLE1BQUEsSUNHRixLQUVFLGlCQUFBIn0=*/");
```
The <style> tag is correctly created in the page and the styles will display, but the sourceMappingURL is not being processed.
If I take that exact same style tag and ensure it is present when the page loads, then the source maps apply completely fine.
What is the expected behavior?
What went wrong?
Source mappings back to the original files should show up in the inspector for dynamically injected style tags.
Did this work before? N/A
Chrome version: 54.0.2840.34 Channel: stable
OS Version: OS X 10.11.6
Flash Version:
,
Sep 23 2016
Thanks - that's exactly it, showing that you just see <style> instead of the source name in the elements tab.
,
Sep 27 2016
,
Sep 28 2016
Tried reproducing the issue on Mac OS 10.11.6 using chrome reported version #54.0.2840.34 by following the below steps: 1. Launched chrome browser. 2. Clicked on https://plnkr.co/UU0PpFBVQZ4Sy4cwjgRr 3. Observed a red coloured box with Hello World! displayed on it. guybedford@ - Could you please confirm if anything missed here to repro the issue and please provide a sample URL and expected result to test this issue. Attaching screenshot for reference
,
Sep 28 2016
Thanks for looking into this. The specific issue is not that the styling does not display, but that when inspecting the red box in dev tools, the source maps for the CSS do not show the original LESS file that the CSS was generated from. The source map itself is provided through a data-uri sourceMappingURL, which works fine for an inline <style> tag in the page on load, but not when that same <style> tag is created injected into the page with JavaScript.
,
Sep 29 2016
Retested the issue on Mac OS 10.11.6 using reported version #54.0.2840.34, chrome stable #53.0.2785.116 and latest canary #55.0.2874.4 as per the comment #0. Observed that the issue is not reproducible. Attaching screencast for the same. guybedford@ - Could you please verify the screencast and let us know if anything missed from our side.
,
Sep 29 2016
Thanks for the screencast here to clarify. I've attached a screenshot to indicate the issue. If you look at the red circled area in the devtools screenshot you can see that it does not display the original LESS file that the body styles come from, so the CSS source map itself has not been applied to the page. If you take a fresh page and include exactly the same HTML of the <style> tag in the original HTML then you will see a source file reference at that same spot showing the correct original LESS file. Just let me know if I can clarify further at all, and thanks again for looking into this.
,
Sep 30 2016
guybedford@ - Thanks a lot for your clarification. Got to know what the issue exactly is. Able to reproduce the issue on MAC 10.11.6, Windows 10 and Ubuntu 14.04 using reported version #54.0.2840.34, chrome stable #53.0.2785.116 and latest canary #55.0.2875.0 as per the comment #0. This is non regression issue as it is observed from M45 and M50 old builds. M35 builds don't even show the <style> tag. Marking it as Untriaged to get more inputs from dev team and removing the Needs-Bisect label. Thanks,
,
Oct 7 2016
,
Oct 7 2016
,
Oct 8 2016
,
Oct 27 2016
This has actually landed and should work now on Chrome Canary. Could you please verify?
,
Nov 15 2016
,
Nov 16 2016
,
Nov 18 2016
Let me check
,
Dec 2 2016
Ah, I see now. Links will appear properly if you additionally supply a sourceURL to the inline stylesheet. We'll have to fix this though.
,
Dec 5 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/67acf0bd70e456cf893140802c1eda5813ab33c5 commit 67acf0bd70e456cf893140802c1eda5813ab33c5 Author: lushnikov <lushnikov@chromium.org> Date: Mon Dec 05 21:34:56 2016 DevTools: support sourceMappingURL for the inline stylesheets This patch properly linkifies inline stylesheet URLs if they have attached sourcemap. BUG= 649679 R=dgozman Review-Url: https://codereview.chromium.org/2545883005 Cr-Commit-Position: refs/heads/master@{#436416} [modify] https://crrev.com/67acf0bd70e456cf893140802c1eda5813ab33c5/third_party/WebKit/LayoutTests/inspector/elements/styles-4/inline-style-sourcemap-expected.txt [modify] https://crrev.com/67acf0bd70e456cf893140802c1eda5813ab33c5/third_party/WebKit/LayoutTests/inspector/elements/styles-4/inline-style-sourcemap.html [modify] https://crrev.com/67acf0bd70e456cf893140802c1eda5813ab33c5/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js [modify] https://crrev.com/67acf0bd70e456cf893140802c1eda5813ab33c5/third_party/WebKit/Source/devtools/front_end/sdk/CSSRule.js [modify] https://crrev.com/67acf0bd70e456cf893140802c1eda5813ab33c5/third_party/WebKit/Source/devtools/front_end/sdk/CSSStyleSheetHeader.js
,
Dec 6 2016
,
Dec 19 2016
Excellent, works perfectly now! |
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by s-r...@onu.edu
, Sep 23 2016