Web-bugs: get.slack.help - text is not visible

[lliehu]

URL: https://get.slack.help/hc/en-us/articles/204092246-Editing-your-profile
Browser / Version: Firefox for Android 48.0
Operating System: Android 6.0.1
Problem type: Text is not visible

Steps to Reproduce
1) Navigate to: https://get.slack.help/hc/en-us/articles/204092246-Editing-your-profile

Expected Behavior: On the page some of the help depends on the platform used. That text is divided into tabs. Text inside those tabs (Desktop, iOS, Android and Windows Phone) is readable.

Actual Behavior: There is no text under the tabs and the tabs themselves don't work. The following JavaScript error is printed to the console from minified code: SecurityError: The operation is insecure.

Problem is also reproducible on Firefox for Android 50.0a2. The same page works on desktop Firefox 51.0a1 on Windows 10. On desktop Firefox the JavaScript error doesn't occur.

_From webcompat.com with ❤️_

[reinhart1010]

Confirmed. By using the same Firefox 48 on Android 6.0.1, the tabs are hidden.
On Chrome 52, the page is rendered correctly.

[adamopenweb]

Thank you @lliehu for reporting and @reinhart1010 for confirming the issue.
From the console we get:

SecurityError: The operation is insecure. slack.zendesk-min.js:1
n._disableHoverIfMobile https://p6.zdassets.com/hc/theme_assets/138842/200037786/slack.zendesk-min.js:1:8374
t https://p6.zdassets.com/hc/theme_assets/138842/200037786/slack.zendesk-min.js:1:3934
[712]/</de.Callbacks/f https://p6.zdassets.com/hc/assets/jquery-c21182ebca0ae195fca8.js:14:18376
[712]/</de.Callbacks/p.fireWith https://p6.zdassets.com/hc/assets/jquery-c21182ebca0ae195fca8.js:14:19185
[712]/</<.ready https://p6.zdassets.com/hc/assets/jquery-c21182ebca0ae195fca8.js:14:13970
[712]/</Ee https://p6.zdassets.com/hc/assets/jquery-c21182ebca0ae195fca8.js:14:11350

Trying to reproduce on desktop using a Firefox Android user agent, the issue doesn't appear. But if we go to responsive design mode and click simulate touch events, the issue reproduces.

Inside of https://p6.zdassets.com/hc/theme_assets/138842/200037786/slack.zendesk-min.js?july14_2

 n._disableHoverIfMobile = function () {
    if ('ontouchstart' in document.documentElement) for (var e = document.styleSheets.length - 1; e >= 0; e--) {
      var t = document.styleSheets[e];
      if (t.cssRules) for (var a = t.cssRules.length - 1; a >= 0; a--) {
        var i = t.cssRules[a];
        i.selectorText && (i.selectorText = i.selectorText.replace(':hover', ':active'))
      }
    }
  },

[adamopenweb]

The event handlers for these elements are in the slack.zendesk.min.js file:

<p class="option" title="tab_one">Desktop</p>
<p class="option" title="tab_two">iOS</p>
<p class="option" title="tab_three">Android</p>
<p class="option" title="tab_four">Windows Phone</p>

function() {
  var t = $(this).attr("title"),
    a = e.data("active");
  e.find(".option[title=" + a + "]").removeClass("active"), e.find("section[title=" + a + "]").removeClass("active"), a = t, e.data("active", a), e.find(".option[title=" + a + "]").addClass("active"), e.find("section[title=" + a + "]").addClass("active")
}

Also in the jquery-c21182ebca0ae195fca8.js file:

f = y.handle = function(e) {
  return typeof de === K || e && de.event.triggered === e.type ? a : de.event.dispatch.apply(f.elem, arguments)
}

Since this fails to load, none of the sections become "active" and the handlers are not set.

<section title="tab_one"></section>

Should look like:

<section title="tab_one" class="active first_content"></section>

[miketaylr]

Fairly certain it's because they're trying to write to a 3rd party stylesheet -- which is a same origin policy violation violation (a variation of the same problem at https://bugzilla.mozilla.org/show_bug.cgi?id=1248444#c3).

The origin of the page is get.slack.help and the stylesheets live at p6.zdassets.com:

n._disableHoverIfMobile = function () {
    if ('ontouchstart' in document.documentElement) for (var e = document.styleSheets.length - 1; e >= 0; e--) {
      var t = document.styleSheets[e];
      if (t.cssRules) for (var a = t.cssRules.length - 1; a >= 0; a--) {
        var i = t.cssRules[a];
        i.selectorText && (i.selectorText = i.selectorText.replace(':hover', ':active'))
      }
    }
  },

Unfortunately this sort of thing works in Blink/WebKit, even though it's a spec violation. We should ask Slack to either set up the appropriate CORS headers for their CSS and JS assets, or come up with some other approach.

[adamopenweb]

Maybe @dzenbot or @DEGoodmanWilson can help us find a contact at @slackhq?

[DEGoodmanWilson]

Hello, I am a contact at SlackHQ. How can I help? (Maybe I should start by reading this thread…)

[DEGoodmanWilson]

Ah. Thanks for this. The thing to do would be to report the bug with our helpdesk: https://slack.com/help/contact

[adamopenweb]

Thanks for the quick reply @DEGoodmanWilson! :)
I reported the issue to the help desk.

[DEGoodmanWilson]

🎉
I know they'll appreciate the detailed analysis!

[adamopenweb]

A bug has been filed internally, we should get an update when it has been resolved.

[FayazAshraf]

This issue is now fixed. Thanks everyone for your input & investigations. Please confirm & close.

[adamopenweb]

I can confirm this is fixed, tested in Firefox 53 for Android.

Thanks for all the help @FayazAshraf! 😄