Mattermost-server: Style breaks sometimes

[sedrubal]

Summary

Sometimes the stylle of mattermost breaks: highlights are totally yellow and unreadable, block code in markdown is rendered wrongly and colors are different to what they should be.

Steps to reproduce

• Use Firefox (version 51, 52, 53)
• Use Mattermost (version 3.6.0 (?) bundled with GitLab 8.17.2, 3.9.0 with GitLab 9.2.5)
• Wait until it breaks

Expected behavior

Style should look like this:

Observed behavior

But sometimes it looks like this:

This is the CSS I extracted using developer tools in Firefox. It's part of an inline style block:

.post.post--comment .post__body {
  border-left:4px solid rgba(0,0,0,.3);
  padding-left:7px
}
.post.post--comment .post__body.mention-comment {
  border-left:4px solid #ff0;
  border-color:#ff0
}

[jasonblais]

@sedrubal @namedrisk Can you go to **Account Settings > Display > Theme > Custom Theme, and copy the vector that appears in the attached screenshot?

I think it might be related to a theme issue

[sedrubal]

@namedrisk Yes, I can reproduce this behaviour, but it is not that issue I wanted to report 😉 My problem is that sometimes the style for all messages and the entire mattermost is strange. And sometimes it is ok again, when you reload the page. The screenshots I posted are exactly the same post (I didn't edit it). But the first one was after I waited for some hours and reloaded the page.

@jasonblais I use "Mattermost Dark":

#1B2C3E,#fff,#1B2C3E,#FFFFFF,#fff,#4A5664,#66B9A7,#FFFFFF,#55C5B2,#A9A14C,#B74A4A,#FFFFFF,#2F3E4E,#DDDDDD,#5de5da,#984063,#A4FFEB,#A4FFEB,#4CBBA4,#FFFFFF,solarized-dark

[jasonblais]

Thanks @sedrubal, that's odd..

1) Does the issue reproduce consistently?
2) Does the issue reproduce after long period of inactivity (either from computer or Mattermost)?
3) Does the issue reproduce after waking the computer from sleep?
4) Have other members on your team reproduced it?

Just trying to think if we can find a pattern, helping us troubleshoot the issue.

@namedrisk I believe this stems from the fact that we allow you to type the language to be highlighted after the ```: https://docs.mattermost.com/help/messaging/formatting-text.html#code-block

Not sure how we might go about fixing that --

[sedrubal]

Yes it is odd.

1. I found no way to reproduce it, but it happened more than 2 times in the last weeks.
2. & 3. It may be caused by a long period of inactivity or by waking the computer from sleep, but it does not happen every time.
3. No other member experienced this (but I'm the only active member in our team using Firefox imho)

[sedrubal]

Now it happened again: I replied to a message and after that I clicked on the ➡️ button to hide the reply side bar. The messages moved out but the grey panel persists at the right side. So I reloaded the tab (F5). After reloading the same issues as described above appeared until now. Reloading again doesn't fix it.

[sedrubal]

There is an error message in Firefox developer console. I'm not sure if it is related...:

Unhandled promise rejection DOMException [SyntaxError: "An invalid or illegal string was specified"
code: 12
nsresult: 0x8053000c
location: https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:5]  main.40a3b202d702380c27ea.js:45:13986
    M/</t< https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:45:13986
    N https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:45:13383
    M/< https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:45:13863
    e.exports https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:12:18849
    <anonymous> https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:14:22653
    v https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:14:22511
    y https://mattermost.xxx.xx/static/main.40a3b202d702380c27ea.js:14:22531

[jasonblais]

@sedrubal Talked to one of our developers and this issue should be fixed in Mattermost 3.8

We'll release Mattermost 3.8-RC1 later tomorrow (April 4th). Would you be interested downloading the release candidate and seeing if you're able to reproduce the issue on that build?

Download links will be here https://pre-release.mattermost.com/core/channels/release-discussion

If you'd rather wait until Mattermost 3.8 is officially out, that's okay too.

[sedrubal]

Wow thanks a lot.

I fear I've to wait until it will be bundled with GitLab. But as I found no way to reproduce it it's hard to say if it is fixed anyway.

[lindy65]

Hi @sedrubal, thanks for your response!

Just letting you know that Mattermost 3.8.1 should be released later today. GitLab should update the omnibus soon afterwards. Let us know if your issue is solved when you can test it out with GitLab :)

[lindy65]

Hi @sedrubal,

I'll close this issue off for now but please feel free to reopen it if you still experience issues once GitLab has updated the omnibus.

[sedrubal]

Do you know when 3.8.1 will be bundled with GitLab?

[jasonblais]

@sedrubal sorry for the delay here: GitLab 9.2 (which releases on the 22nd) will have Mattermost 3.9.0. It should contain a fix to the issue you raised here.

Due to some delays, Mattermost 3.8 didn't make it to GitLab 9.1,

[sedrubal]

Now I'm on GitLab Mattermost 3.9.0 and it just happened again -.-

After reloading everything looks fine, but when the content of a channel got loaded the same error message like above appears in Firefox Developer console and the content appears with a broken style:

Unhandled promise rejection DOMException [SyntaxError: "An invalid or illegal string was specified"
code: 12
nsresult: 0x8053000c
location: https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1]  main.8df02c283d1e91c670ac.js:1:2193895
    N/</t< https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:2193895
    M https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:2193292
    N/< https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:2193772
    e.exports https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:523435
    <anonymous> https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:592207
    v https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:592065
    y https://$mattermost_url/static/main.8df02c283d1e91c670ac.js:1:592085

Here are just other examples of the broken style:

[hmhealey]

Hi @sedrubal,

Do you see that error in the console every time you load Mattermost, or does it only happen when you view certain channels? Could you try creating a new channel containing no posts, and seeing if it happens there?

Also, could you try switching your theme back to the default Organization theme temporarily to see if it still happens then?

[sedrubal]

Currently mattermost looks ok and this error does not appear. I switched to the organization theme and I'll report back if it breaks...

[jasonblais]

Thanks @sedrubal! We'll assume that the problem is fixed or is no longer valid. If you still experience the same problem, reopen this issue with the relevant information and we'd be glad to help you where we can.

[sedrubal]

Now it happened again in "Mattermost Dark" mode but I could fix it by changing to the "Organization" Theme and switching back to "Mattermost Dark". But the settings modal did not disappear after clicking on the x. I reloaded the page and then everything worked as expected. (But only reloading the page did not help in the past).

[jasonblais]

Thansks @sedrubal, hmm. Wondering if you'd like to post an issue report in our troubleshooting forums? https://forum.mattermost.org/t/how-to-use-the-troubleshooting-forum/150

It has more visitors and it would be good to hear if other people have faced it. We haven't been able to reproduce this one on our end yet but would love to find a root cause for it.

[sedrubal]

Thanks.

To complete the questions above:

Do you see that error in the console every time you load Mattermost, or does it only happen when you view certain channels?

If it is the case that the style breaks, the error appears on every page with dark theme when reloading the tab. (So it does not appear at https://mattermost.xxx.xx/<team>/integrations).

Could you try creating a new channel containing no posts, and seeing if it happens there?

Creating a new empty channel and reloading the page in this channel seems to fix the issue. Then I can open the old channels and it seems still to work.

I posted the topic to https://forum.mattermost.org/t/dark-theme-breaks-now-and-then/3395

[sedrubal]

I'm very sorry, I found the reason: I use an addon which changes the user agent from time to time and it always breaks with a specific user agent:

Faked user agent which breaks mattermost:

User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36

but I use Firefox... 🙈

[lindy65]

Ah, good that you found the problem though! So your issue is resolved by not using the faked user agent?

[sedrubal]

Yes, it solves the issue reproducible. Sorry for stealing your time 😫

[lindy65]

No worries at all @sedrubal! It's been my pleasure to be of assistance... I'll close this issue off as well as the corresponding one on the forums.

Please let us know how it goes and feel free to come back at any time if you experience any issues!