-
Notifications
You must be signed in to change notification settings - Fork 71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make IE happy #76
base: gh-pages
Are you sure you want to change the base?
Make IE happy #76
Conversation
This is not an IE error, or a Safari error, or even likely a browser error! This bug is likely because somehow the queries parsed by EQCSS are losing their This means if there's something happening on the page that is causing style information to be dropped from It would be beneficial to build some test cases so we could narrow down how and when this is happening. On the last site that reported this bug I was able to verify the queries they were using as valid, I was able to verify that initially the EQCSS syntax does get parsed and loaded by the EQCSS.js plugin correctly, and when I test the queries and EQCSS.js in isolation from the rest of the site they function correctly. But on that site (and possibly yours as well) something present on these page is causing the queries that EQCSS.js has already parsed and loaded into So what happens between the successful EQCSS.js parse, and the moment where EQCSS.apply() tries to replace a (now) Troubleshooting ideasVerify your SyntaxYou can load your queries in a new document that just contains your queries and EQCSS.js, once the page has loaded, open your JS console and type Another way you can verify that your queries are formatted correctly and able to be parsed by EQCSS.js is to run your EQCSS syntax through
This will download your file, pass it to Verify EQCSS.jsIf you create an empty HTML document and add EQCSS.js, and either the link to your EQCSS syntax or the output from
This code means: “For each query in Test the live siteOn the sites where you see the errors occurring, try running the same code to see which queries are dropping
If you're seeing the errors reported above you should have something showing up here. What might be interesting to note:
So far nothing has turned up as far as looking at EQCSS.js on pages where this happens, but I'd have to have access to all of the JavaScript they were running to see how something might be interacting funny. For now the most useful thing we can to do nail this down is provide the smallest still-offending test case |
Also, this seems to be the same problem as the iOS issue here: #71 |
OK, so I did a little more digging. In this case, for the site I'm working on, it is an IE issue. Everything works fine in every other browser I've tried. I have some inline SVGs with an embedded non-empty style sheet. However, IE thinks they are empty.
In this context I don't think forcing Maybe there should be a debug version of the script so that other bugs can be more easily traced? |
Ah, this could be separate from the other issue! I'd prefer to fix it, if possible, rather than suspend the error letting you know it's broken. Are you able to produce a stripped-down test that reproduces the bug you're seeing? Some thoughts based on what you've said:
In order to try to fix this I'll need a test case - until now you haven't even mentioned which versions of IE this is broken in, I'll need to know everything you know about where the bug is showing up and how to recreate it :D |
I think I might have a solution - it does appear IE doesn't have a way to access the I think in the case of EQCSS, not supporting Unfortunately I'm not sure the best way to do this. Both HTML and SVG I just wrote a quick if statement that seems to dodge the problem, does this work for you: // Process
if (styles[i].namespaceURI !== 'http://www.w3.org/2000/svg') {
EQCSS.process(styles[i].innerHTML);
} I believe that should fix it, but I wonder if there's a better way to detect this! |
Ah, a better way might be to check the constructor string: // Process
if (styles[i].toString() !== '[object SVGStyleElement]') {
EQCSS.process(styles[i].innerHTML);
} Testing these approaches to avoid processing any Edit: This also works, not sure which is best! if ('SVGStyleElement' in window && style[i] instanceof SVGStyleElement) {
EQCSS.process(styles[i].innerHTML);
} |
My preference would be:
Again, I don't think EQCSS should bork everything else when it runs into a situation it doesn't understand. |
Fix #72, or at least the IE part - not tested on a Mac.