css files do not load using xstyle/css! in Chrome Beta, Dev, and Canary Channels

[tmcgee]

Issue

css files do not load at all when using xstyle/css! in Chrome Beta, Dev and Canary Channels. Right now this probably affects only a small group, mostly developers however, this may soon could become a BIG problem for most Chrome users very soon when the Stable Channel moves to Version 51.

Impact

CMV application will not load at all. The error visible in the console is:

ReferenceError: normal is not defined

Affected Browser Versions

I tested using these versions of Chrome on Windows 10 (2 different computers):

• Beta Channel
  • Version 51.0.2704.22
  • Version 51.0.2704.29 beta-m (64-bit)
  • Version 51.0.2704.29
• Dev Channel
  • Version 52.0.2716.19
• Canary Channel
  • Version 52.0.2720.0 canary (64-bit)

I tested using these versions of Chrome on Windows 7 (1 computer):

• Beta Channel
  • Version 51.0.2704.29
• Dev Channel
  • Version 52.0.2716.0

Stable Channel is not affected

The error does not occur when using the current Chrome Stable Channel:

• Version 50.0.2661.94 (64-bit) (Windows 10)
• Version 50.0.2661.94 (Windows 10)
• Version 50.0.2661.94 (Windows 7)
• Version 50.0.2661.75 m (Windows 7)

Other Windows Browsers are not affected

The error does not occur with Firefox, Internet Explorer 11 or Microsoft Edge. I did not check older version of IE, Safari or other browsers.

Other Platforms?

I did not check this on other PC platforms or Mobile

Cause:

CMV uses xstyle that is shipped with the ArcGIS JavaScript API. As of version 3.16 of the API, this is xstyle version 0.1.3. This version has been included since version 3.8 of the API and is 3 years old.

Using the most recently tagged version of xstyle (v 0.3.1, December 2014) from the xstyle repo does not resolve the issue.

xstyle is not included with the build for the pending JavaScript API version 4.0 so we will want to use a different version going forward.

Using a local build or loading the latest version from the current master branch does work.

Resolution:

Add xstyle to your packages array in dojoConfig:

{
    name: 'xstyle',
    main: 'css',
    location: 'https://cdn.rawgit.com/kriszyp/xstyle/master'
}

If you are using cmv versions 1.3.4 or earlier, dojoConfig is found in index.html.

If you are working with the current CMV develop branch in this repo, the dojoConfig is in the app.js.

Going forward

I will be submitting a PR to fix this in the develop branch.

We may want to accelerate the release of CMV version 1.4.0 or consider a hot patch for the master branch.

Pinging @DavidSpriggs so you are aware...

[tmcgee]

Here's the commit in the xstyle repo which address this issue over a year ago.

[cmccullough2]

Curious, I have tried to connect to the xstyle urls in this viewer. However, I keep getting a 404 error message. Will the xstyle work? https://cdn.rawgit.com/kriszyp/put-selector/v0.3.6, https://cdn.rawgit.com/kriszyp/xstyle/v0.3.2. Will I have to download the library locally?

[tmcgee]

@cmccullough2 You will get 404 errors if you use just those urls that you listed. That is just the path to the package. The file that is loaded is determined by the associated main property in the package array. For example, the actual JavaScript for xstyle loads from this url: https://cdn.rawgit.com/kriszyp/xstyle/v0.3.2/css.js

[cmccullough2]

Thank you, this was very helpful.