Rails Turbolinks 引发的微信浏览器 BUG
事情是这样的，今天有个微博用户给我反馈说，网站在微信浏览器和手机 QQ 浏览器中打开全是蓝色，开始我还以为是他的手机问题，因为我之前也在手机浏览器中打开过，显示得很好，后面才注意到是微信浏览器（传说中将开发，设计，产品全都 QJ 了一遍的浏览器）
然后我就在微信浏览器中看到了让我困惑的一个界面，网站全是蓝色的，不过隐约能看到一点点后面的页面元素。想了半天没想到究竟是什么原因。
然后这位微博用户提醒我，我的页面的 html 中出现了下面的样式
html.turbolinks-progress-bar::before {
content: ' ';
position: fixed;
top: 0;
left: 0;
z-index: 2000;
background-color: #0076ff;
height: 3px;
opacity: 0.99;
width: 0%;
transition: width 0ms ease-out, opacity 0ms ease-in;
transform: translate3d(0,0,0);
}
想必就是的加载条这里出了问题，然后我 F12 了 ruby-china，发现多了一个自定义样式：
html.turbolinks-progress-bar::before {
position: absolute !important;
background-color: #EB5424 !important;
height: 2px !important;
}
于是我也试着加上去，但是问题还是断断续续地出现，不知道里面还有其它什么我没有做到的操作呢？
发现了这个 https://github.com/ruby-china/ruby-china/commit/548797cf98a67b20fdbdfa7c0e64ae6ac918fad3 不过不知道什么原因，我加上这个之后问题还是存在 @huacnlee
Rei
#2
2015年10月31日
针对微信关掉 Turbolinks 的方法。
复制当前版本的 turbolinks.coffee 到 asserts/javascripts，找到这个方法（不同版本可能细节不同）：
ua = navigator.userAgent
browserIsBuggy =
(ua.indexOf('Android 2.') != -1 or ua.indexOf('Android 4.0') != -1) and
ua.indexOf('Mobile Safari') != -1 and
ua.indexOf('Chrome') == -1 and
ua.indexOf('Windows Phone') == -1
加入微信浏览器的判断：
ua = navigator.userAgent
browserIsBuggy =
(ua.indexOf('micromessenger') != -1 or ua.indexOf('MicroMessenger') != -1) or
(ua.indexOf('Android 2.') != -1 or ua.indexOf('Android 4.0') != -1) and
ua.indexOf('Mobile Safari') != -1 and
ua.indexOf('Chrome') == -1 and
ua.indexOf('Windows Phone') == -1
jan
#5
2015年10月31日
不仅是微信，其他的某些浏览器也会有这个问题。
position: absolute我这里也不行，最后索性通过 media query 在小屏幕上把 progressbar 给隐藏了：
html.turbolinks-progress-bar::before {
display: none;
height: 0 !important;
@media (min-width: $screen-sm-min) {
display: block;
background-color: $primary-color !important;
height: 2px !important;
}
}
