我正在处理http://freecodecamp.com上的挑战,我遇到了一个非常奇怪的“错误”。当我面临挑战时(例如,这个挑战,尽管它发生在任何挑战中),如果我单击帮助以显示他们的帮助聊天,我的外部显示器开始闪烁并且通常出现故障。如果我关闭帮助聊天,它会立即恢复正常。如果我将浏览器拖到笔记本电脑的内置显示器上,问题就会消失。如果我让闪烁持续超过几秒钟,它将改变显示器上所有内容的相对位置,例如,屏幕的上半部分显示在底部,反之亦然,这种变化即使在我关闭了帮助聊天,直到我拔下显示器并将其重新插入(打开和关闭显示器是不够的)。
这是YouTube 上发生的事情的视频,因为我无法通过屏幕截图捕获它。
出现故障的显示器是 HP 2311xi,我在 Ubuntu 16.04 上使用 Google Chrome 版本 55.0.2883.87。此故障已出现在其他站点上,但总是很快消失,这是我第一次找到可以持续重现该错误的上下文。
查看页面源,聊天似乎使用了Gitter sidecar,我已经确认在其他地方使用的 sidecar 也会导致此故障,例如,他们演示站点上的 sidecar。(我假设问题不在于 Gitter sidecar 本身,而在于他们碰巧使用的东西也在网络上的其他地方使用)。
作为一名 JavaScript 的学习者,并且通常对这样的事情感到好奇,我想知道 JavaScript 或其他地方的哪些内容会对我的外部显示器产生这种影响?
更新:
所以我决定连接一台旧的戴尔显示器,看看它是否特定于显示器,当我打开 Gitter sidecar 并在该显示器上显示浏览器时,它几乎立即让显示器进入睡眠状态——屏幕变黑,电源指示灯改为橙色等。所以显然不是特定于硬件,而是对不同的硬件产生不同的影响......
更新 2:
同样的事情发生在 Firefox 中,这并不让我感到惊讶。但是,令我惊讶的是,如果我访问已经显示聊天窗口的https://gitter.im/gitterHQ/sidecar-demo(与上面的其他链接不同,需要单击按钮才能使边车滑出),即使在浏览器中禁用了 JavaScript,此站点也会导致相同的故障...
更新 3:
在另一个没有Gitter sidecar 的站点上遇到此问题后,我能够进一步缩小原因。我发现当显示这样的链接时(因为它们在许多网站上,包括 Gitter sidecar 演示):
这足以引起问题。通过在 Chrome 开发工具中切换 css 属性,我发现1px dotted black
边框似乎是触发器。以下代码行足以为我重现:
<a href="#" style="border-bottom: 1px dotted black">This is a killer link</a>
如果我使边框超过1px
它不会发生(我发现它会在浏览器中以 100% 的缩放级别停止,并且大小为1.25px
, 但仍会发生在 < 1.25px
。此外,如果我只更改为其他东西着色black
或删除dotted
属性,故障不会发生。
最后一点是,当我打开上面链接的屏幕截图时,我发现仅查看相关链接的屏幕截图会导致故障,并且放大以使虚线边框更厚会使问题消失(因为是浏览器中的案例)。
最后几点表明该问题根本不是由 JavaScript 引起的,而且我想甚至与浏览器没有直接关系,因为我可以通过查看屏幕截图来重现该问题。