UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
Steps to reproduce the problem:
1. decompress the uploaded docs.zip
2. open the index.html
3. Click group1demo1 and group1demo2 back and forth
What is the expected behavior?
when we click group1demo1,the right `hello ` content will have red backgroundColor
What went wrong?
sometime the right `hello ` content has red backgroundColor,sometimes it doesn't
Did this work before? N/A
Chrome version: 59.0.3071.115 Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 26.0 r0
when we click group1demo1,the page will create style by javascript,the code like beblow:
if(!this.cssStyle){
var style = document.createElement('style');
style.setAttribute("type","text/css");
this.cssStyle = style;
document.getElementsByTagName('HEAD').item(0).appendChild(style);
}
Less.render(`#${this.playerId}{${value}}`,(err,output)=>{
if(!err && output && output.css){
if(this.cssStyle.styleSheet) {
this.cssStyle.styleSheet.cssText = output.css;
} else {
while(this.cssStyle.firstChild) {
this.cssStyle.removeChild(this.cssStyle.firstChild);
}
this.cssStyle.appendChild(document.createTextNode(output.css));
}
}
})
|
Deleted:
docs.zip
388 KB
|
Comment 1 by woxxom@gmail.com
, Jul 17 2017There's a bug in your code: the generated id attribute sometimes starts with a digit, which is allowed in HTML id, but not in CSS #id selector [1]. Quoting the CSS spec: > In CSS [...] they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Indeed, document.querySelector('#30jgjm') says it is not a valid selector. Right-clicking the element in devtools and copying its selector results in #\33 0jgjm Solution 1: escape the id when generating the style element: '#' + CSS.escape(generatedId) Solution 2: prepend the id with a valid character: 'z' + generatedId [1]: https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier