自定义滚动条额外样式导致浏览器崩溃

webkit 提供了用 css 设置滚动条样式的自定义方式，可以很方便地改变默认的滚动条样式，但是如果不小心添加了额外的样式定义，在某些情况下却可能导致浏览器的崩溃。这里我遇到的是在为 scrollbar-thumb 添加了一个额外的 overflow 样式属性时，缩放页面会导致浏览器崩溃的 bug。

这里的缩放不是 resize 窗口，而是“视图”->“缩放”操作缩小放大页面。

刚遇到缩放页面导致 chrome(默认浏览器) 崩溃的时候，还没有太在意，因为最近几版 chrome 总是在样式上有些莫名奇妙的问题，现在想来，总是和它的滚动条有关：

• Mac下，本来只有滚动时，才能看到滚动条，并且这个滚动条不占用页面宽度；但是一旦插上外接 USB 的鼠标，它就会和在 Windows 系统下 IE 一样一直都存在且占位，只是样式不同。
• Mac 下，打开页面不滚动时，一个浮层上的 css3 动画执行的一些元素显现会导致整个浮层闪烁不定，滚动一下页面就恢复了正常。(最近2个月之内发布的版本修复了这个问题)
• 很早之前说过的，只有 Windows 系统下的 chrome 滚动条透明问题

和其他同事交流，他们也遇到过一些莫名其妙的问题。

回归正题，测试了一番，才发现原来是样式定义导致的问题。只有自定义滚动条显示时缩放页面，才会导致浏览器崩溃，如果定义了滚动条的元素是隐藏的，则不会导致该问题。查看关于滚动条的定义，发现有两个语句是无用的：

::-webkit-scrollbar-thumb {
	background-color: #D1D1D1;
	border: 1px #C4C4C5 solid;
	-webkit-border-radius: 4px;
	/*下面的语句对 thumb 无用*/
	outline-offset: 20px;
	overflow: hidden;
}

最后两个语句对 scrollbar-thumb 在这里并没有作用，进一步定位测试，原来只要定义了 scrollbar-thumb 的 overflow 属性，就会导致缩放页面崩溃。只要去掉这个定义即可修复。

缩放后的页面会有很多问题，尤其是样式上的细微错位，甚至在 chrome 中缩小后点击一次输入框页面就会上下抖动一下，尽管不是完美表现，但导致崩溃，仍是我们不能容忍的。

chrome 浏览器的表现还不错，如果崩溃，只会影响这一个 Tab 页，还会给出崩溃的提示。如果是 safari，一旦崩溃没有任何提示，整个应用程序直接退出。

新的问题总是千奇百怪出人意料，但在实现时，保持代码的清晰、简明，是减少出现问题以及快速解决问题的保证。同样 CSS 需要尽量简洁的定义，一切不必要的样式定义都有可能在某个时刻某些情况下导致莫名奇妙的问题。这点之前在 IE，尤其是 IE6 上表现的比较明显，但随着 web 应用的不断复杂化，其他浏览器也可能会遇到对复杂的样式定义解析失误的情况，因此首先要做到的是代码最小化，不要有其他不必要的干扰。

关于自定义 webkit 内核浏览器的滚动条，可以参考: http://www.cnblogs.com/rubylouvre/archive/2011/03/01/1968057.html