外部鼠标插件导致浏览器在Mac OS X中重新渲染页面？

Question

基本问题：插入外接鼠标会导致chrome和firefox将滚动条添加到浏览器中的页面（我构建的）。我试图找出原因，但很难找到信息。我们已经在OSX 10.7.5和10.8.5上测试并重现了该问题。

我的理论是，由于两种浏览器都以这种方式响应，因此事件序列如下：

1. 插入外接鼠标。
2. 操作系统识别鼠标并向正在运行的应用程序发送某种事件。
3. 正在运行的应用程序收到此事件，并更改页面的呈现。

我已经对两种状态的计算样式进行了差异化，并且没有区别，只是为了排除它。这是一个关于发生了什么的GIF动画。我唯一要做的就是插入外接鼠标：



我的问题是，当插入外部鼠标时，从操作系统向浏览器发送了什么类型的事件，以及如何深入了解该事件的处理方式？

Answer 1

如果我没有完全误解你的问题，那么这与浏览器无关，而是OS X的一个功能是隐藏滚动条（在每个支持的程序中），只要你使用输入不需要滚动条的设备（如MacBook的触控板）。如果是这种情况，则滚动条也应出现在例如将鼠标插入的Finder。

要更改此行为，请转到System Preferences＆gt; General并选择Always下的Show scroll bars。

Answer 2

对我来说，问题是使用vw单元不考虑滚动条宽度。将我们的CSS改为使用％而不是vw（50％vs 50vw）。

CanIUse.com说：

  

目前所有浏览器，但Firefox错误地认为是100vw   整个页面宽度，包括垂直滚动条，这可能会导致   溢出时的水平滚动条：自动设置。

• http://caniuse.com/#feat=viewport-units

请参阅此codepen以获取证据。 http://codepen.io/anon/pen/ZGYNWZ尝试使用和不使用USB鼠标。

CSS：

<div class="thing">

</div>

HTML：

{{1}}