I am working through challenges on http://freecodecamp.com and I have come across a very strange "bug". When I am on a challenge (say, this one, although it happens on any challenge), if I click Help to reveal their help chat, my external monitor starts flickering and generally being glitchy. If I close the help chat, it immediately goes back to normal. If I drag the browser to the built-in display on my laptop, the problem goes away. If I let the flickering continue for more than a few seconds, it will shift the relative position of everything on the display so that e.g., the top half of the screen is displayed on the bottom and vice versa, and this change will persist even after I close the help chat, until I unplug the display and plug it back in (turning the display on and off is not enough).
Here is a video on YouTube of what is happening since I wasn't able to capture it through a screenshot.
The display that is glitching is the HP 2311xi and I am using Google Chrome version 55.0.2883.87 on Ubuntu 16.04. This glitch has appeared on other sites, but always went away pretty quickly, and this has been the first time I found a context where I can consistently reproduce the bug.
Looking at the page source it appears that the chat uses Gitter sidecar, and I have confirmed that sidecar used elsewhere also causes this glitch, for example, the sidecar on their demo site. (I am assuming the issue is not with Gitter sidecar itself, but rather with something that they happen to use that is also used elsewhere on the web).
As a learner of JavaScript, and someone who is generally curious about anything like this, I am wondering what in the JavaScript or elsewhere could have this kind of effect on my external display?
Update:
So I decided to hook up an older Dell monitor to see if it was specific to the monitor, and when I opened the Gitter sidecar with the browser displayed on that monitor, it almost instantly put the monitor to sleep - screen went black, power light changed to orange, etc. So obviously not specific to the hardware, but affects different hardware differently...
Update 2:
The same thing happens in Firefox, which doesn't surprise me. However, what does surprise me is that if I visit https://gitter.im/gitterHQ/sidecar-demo which has the chat window already displayed (unlike the other links above where a button needs to be clicked for the sidecar to slide out), and this site causes the same glitch even with JavaScript disabled in the browser...
Update 3:
After experiencing this issue on another site without a Gitter sidecar, I was able to further narrow down the cause. I found that when links like this are displayed (as they are on many sites including the Gitter sidecar demo):
this is sufficient to cause the issue. By toggling css properties in Chrome dev tools, I found that it is the 1px dotted black border that seems to be the trigger. The following line of code is enough to reproduce for me:
<a href="#" style="border-bottom: 1px dotted black">This is a killer link</a>
If I make the border more than 1px it won't happen (I have found that it will stop with a zoom level of 100% in the browser, and a size of 1.25px, but will still happen at < 1.25px. Also, if I change only the color to something other than black or remove the dotted property, the glitch will not happen.
One last note is that when opening the screenshot I took of the link above, I found that just viewing the screenshot of the link in question causes the glitch, and zooming in so that the dotted border is thicker makes the problem go away (as is the case in the browser).
These last few points show that the issue is not caused by JavaScript at all, and I guess not even directly related to the browser, since I can reproduce the issue just by viewing a screenshot.