The error report is a bit unclear… do you believe the issue is with an updated version of Chrome mobile, or with Dojo? Also I would need to see a bit more code to track down what the issue is.
I am having this same exact issue too. I had built a dojox mobile application for an ESRIJS project. Upon the newest Chrome release about a week or so ago, I started getting the same error. It still worked on chrome desktop, until a couple days ago until it was upgraded as well. Works fine in other browsers, but would like users to use Chrome only. It had been stable for about a year before this release.
I worked with ESRI to determine it wasn’t a problem with their API, and was told to ask for help from Dojo.
It happens when navigating to another List View for me. The next ListView does not render. I am dynamically populating a single list based on what the user taps in the previous one. I get the ccsRules/CSSStyleSheet error.
Hey, guys! @webdel, @adongre I’ve just run into the same issue. After a bit of investigating it looks like it’s a chrome v64 bug that doesn’t allow reading the rules from an externally hosted stylesheet([link to chromium bug description]
In my case the error was triggered by a stylesheet from the fontawesome website that my code was pulling in. My work around was to download the stylesheet and serve it from my app’s server. Maybe something similar would work for you as well.
Good luck,
Danny
PS Thanks to Dylan and all the dojo team for your great work over the years. Bring on dojo 2!
I’m not sure what all stylesheets I’m supposed to host, as it is not provided in the error - any suggestions? I’m not sure if I can do that since I have to use the ESRI js cdn.
Haven’t worked with ESRI but after having a quick look around their website, just now, I see
that they provide a link tag to their main.css file (link to arcgis sute)
I tried including that file into a test page and got the same error in Chrome.
So a quick workaround would be to download main.css from their site and upload it to your server.
Your app should work then. Maybe when the issue in Chrome is fixed you could switch back to ESRI CDN.
Now it’s possible that because I’m not familiar with ESRI I’ve been looking in the wrong place and
above info is no use to you. In that case, you may have better luck looking through your html files and noting down all external hosted stylesheets you use. Then download them and serve from your server.
If you still get the error you can try looking in the Chrome Debugger Network tab. Find all external
stylesheets and store them on your server.
Yeah, the error doesn’t identify the stylesheet but you could put a breakpoint on that line and loop through all the stylesheets to find the ones that throw the error. That’s what I did but there’s no need now because we know only external stylesheets cause this error.
Unfortunately, I can’t override ESRI’s cdn with a local copy as it will break the links for their esri specific modules. So hosting a local copy will not work.
Is that because ESRI stylesheet contains links to other assets on their site? In that case you could edit the links inside the local copy of that stylesheet to point to their server. If main.css is the culprit then it contains mostly links to images you can copy the images as a stop gap measure if you absolutely need to get you project working.
Does that make sense? Maybe I don’t understand some subtleties of your predicament.
Danny
EDIT @adongre I can’t create a new reply because of the limit on replies so I’m adding it here. Looks like this is the end of the discussion.
Sometimes from afar we don’t see the simple solution.
So maybe because I’m not understanding the problem domain I’m making this over-complicated.
Looking at your error and not having anything else
to go by, this is what I would try:
It looks like your browser is pulling in iconUtils.js from the ESRI site.
It’s minified js so it’s hard to set a breakpoint where you want.
I don’t know if you’re familiar with tools that redirect http requests?
For this purpose maybe something like ‘Requestly’ from Chrome Web Store.
Using Requestly you could redirect the request for ESRI iconUtils.js to a local dojo source iconUtils.js
that you have on a server you control (like your local development machine)
Start Chrome with --allow-running-insecure-content,
run your app and set the breakpoint at line 80 of that file, then
keep hitting ‘resume execution’ in the chrome debugger and loop until you get to the stylesheet that’s causing the error (or add some debug code - faster).
This way you can find out exactly where the stylesheet is coming from and get a better idea of what to do.
Maybe copy that stylesheet and change the links to files it references.
It sounds like it’s a big job but it might not be. Depends on how mission critical your downtime is.
Are there any ESRI users experiencing this issue? Maybe they can resolve this more effectively.
That makes sense. It might take some fiddling on my part. I was really hoping there would a be cleaner workaround. What might be an issue is that it is trying to access the cssrules through some esri js (non-dojo) code. So I don’t even know if that would work. What do you think from the error below?
Hi Danny,
Resolving that error only took 5 minutes. So Chrome seems to have listed the style sheets from win.doc.styleSheets in an object versus an array on the update. The function was trying to loop through an array to load the stylesheets using a classic for loop. Using the redirect to my js file, I just switched it “for (key in Object)”, and my page loaded and worked as expected.
So I was hoping that I could add my modified script at the end of all the js references, to overwrite the iconutils.js from the cdn, but I’m getting the following error now. I’m guessing it doesn’t like the fact that I’ve loaded a module externally. I have also tried loading as a module in the module loader to possibly overwrite that way, but no luck either. Any further guidance?
Maybe I could override that specific function somewhere else in my code?
I wish we didn’t have to pollute this dojo forum because this is not a dojo problem.
But there’s no private message facility so here goes:
Maybe I could override that specific function somewhere else in my code?
It would be more dificult to ovverride your modified js file in production code like you’re finding
out with new errors.
It should be easier to find and overwrite css.
The reason I suggested that debugging method was to pinpoint which stylesheet is causing the “Failed to read the ‘cssRules’” error. Once you identify that stylesheet you can try serving it locally and see what
happens.
See that ‘for loop’ you mentioned? Before you changed the code, it failed, trying to access a certain stylesheet, right?
Okay, if I had listened to you on your first post, I would have had this all resolved. I guess I had to work through the errors myself. I referenced all the offending css stylesheets on my own server and everything is working. There are some things it can’t find, like the esri logo that goes on the map, but oh well. Thank you for your help.
-Not too worried about mucking up this thread. ESRI claimed it wasn’t there problem and told me to ask Dojo, so I had nowhere else to turn. Plus, the name of this app is called Discourse, so that’s what we are doing!
No reason to apologize for discussing, that’s why this forum exists! Glad to hear you found a workaround. Hopefully this will just be fixed in the next version of Chrome as well… Edit… actually looks to be a deliberate change to limit the security origin of CSS rules…
