Rails Turbolinks 引发的微信浏览器 BUG

hxh1246996371 · 2015年10月31日 · 最后由 embbnux 回复于 2015年11月02日 · 3978 次阅读

事情是这样的,今天有个微博用户给我反馈说,网站在微信浏览器和手机 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

针对微信关掉 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

#1 楼 @hxh1246996371 现在 Ruby China 有这个问题吗?

#3 楼 @rei ruby-china 是没问题的

不仅是微信,其他的某些浏览器也会有这个问题。

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;
  }
}

#5 楼 @jan 这个方法行,不过我换成了原始的 NProgress 没问题

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

#5 楼 @jan 大体来讲这个 Bug 和 Turbolinks 其实没什么关系……微信在安卓系统上的浏览器用的是自家的 X5 内核,这个内核有很多前端的 bug,这篇文章有较为全面的概括……具体来讲这个 bug 中的position:fixed就是微信不支持的属性之一……

rubyChina 前些日子在我 QQ 浏览器上一片红其他什么都看不到,刚试了下现在可以了

换个 progress-bar 就可以,不用自带

需要 登录 后方可回复, 如果你还没有账号请 注册新账号