苹果 ios端 position:fixed引起的BUG解决

项目移动端在往下滑动超过一个屏幕要出现返回顶部的按钮，就用fixed固定在屏幕的右下角。
用谷歌调试工具，怎样调试都没问题，于是就放到了测试服务器上，用手机端访问。

4个安卓手机无论上下怎么滑动都没问题，苹果手机刚开始进去没问题，可是往下滑动着，滑动着，当返回顶部按钮出现之后，整个页面整个变成了白色，就剩下个返回顶部按钮在右下角，往上滑动返回顶部按钮隐藏，页面又出来，往下滑动，返回顶部按钮显示，页面又整个成白色的了。见了鬼了，苹果我记得不差的话也是webket 内核吧，按说没问题啊

试验一：
让按钮上来就显示，不让按钮在滑动超过一屏之后再显示而是直接就显示，这样一来，苹果端和安卓端访问都没问题了，可是问题是不能这么干啊，跟产品要求不符合，肯定没法交差啊

于是又想了一招，
试验二：
在按钮的外面套个盒子，你不是不让我动态显隐吗？页面一上来就展示这样的不是管用吗？
我整个空白的盒子用fixed直接放这儿，里面的内容先隐藏，等页面滑动超过一个屏幕的时候只需要控制盒子里面内容显示就行了。
注意：返回顶部事件绑定在里面的内容上，不能绑定盒子上，否则会出现灵异事件

<div class="outbox">
    <div v-show="miniScreen" class="back-top" :class="{'show':backTopFlag}" @click="jumpTo(0)">
        <div class="up-arrow">div>
        <div class="dn-arrow">div>
    div>
div>

.outbox{
   width:32px;
   height:32px;
   border-radius:6px;
   position:fixed;
   z-index:5;
   bottom:@mv-main-out;
   right:@mv-main-out;
   background:transparent;
   .back-top{
       width:32px;
       height:32px;
       display:none;
       opacity:0;
       transition: all 0.5s ;
       .up-arrow,.dn-arrow{
           width:0;
           height:0;
           margin:0 auto;
           border-radius:50%;
       }
       .up-arrow{
           border-bottom:12px solid @base-color;
           border-left:12px solid transparent;
           border-right:12px solid transparent;
           margin-bottom:4px;
       }
       .dn-arrow{
           border-bottom:16px solid @base-color;
           border-left:16px solid transparent;
           border-right:16px solid transparent;
       }
   }
   .back-top.show{
       display:block;
       opacity:0.7;
   }
}