[Bug Report] tab-container苹果点击有短暂闪烁

[xuzhiguang]

Mint UI version

2.2.13

OS/Browsers version

苹果ios11，所有浏览器

Vue version

2.5.17-beta.0

Reproduction Link

http://res.xuzhiguang.com/#/detail/1

Steps to reproduce

点击详情下面的任何位置

What is Expected?

无反应

What is actually happening?

div出现背景颜色，类似加了:active的效果

[JerryYuanJ]

可以使用css颜样式去掉的

[jingxiawl]

@JerryYuanJ 用什么样式去掉呢？现在看来不光是ios，安卓浏览器上面也有这个问题

[JerryYuanJ]

@jingxiawl 是点击div或者其他可点击的部分，有黑灰色的阴影出现闪一下是吗？

[jingxiawl]

不是，是滑动切换tabcontainer的时候会闪烁一下

[jingxiawl]

你直接用那个tabContainer开启滑动切换就可以看到

[jingxiawl]

@JerryYuanJ 不是，是滑动切换tabcontainer的时候会闪烁一下,你直接用那个tabContainer开启滑动切换就可以看到

[JerryYuanJ]

@jingxiawl 按钮还是container容器？我只看到按钮有一个active的状态样式，没看到容器有你说的现象

[jingxiawl]

@JerryYuanJ 不是按钮。就是那个container容器滑动切换页面

[JerryYuanJ]

@jingxiawl 抱歉，看了几次都没看到你说的这种情况。建议浏览器查看对应的样式切换时的状态，再设置其为transparent透明即可

[jingxiawl]

<template>
  <div class="orderContainer">
    <!-- tab-container -->
    <mt-tab-container v-model="selected" :swipeable="true">
      <mt-tab-container-item id="1">
        <div style="height: 100%;overflow-y: auto;">
          <div v-for="n in 10" :key="n" class="item">{{'tab1:'+n}}</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div style="height: 100%;overflow-y: auto;">
          <div v-for="n in 2" :key="n" class="item">{{'tab2:'+n}}</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <div style="height: 100%;overflow-y: auto;">
          <div v-for="n in 21" :key="n" class="item">{{'tab3:'+n}}</div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="4">
        <div style="height: 100%;overflow-y: auto;">
          <div v-for="n in 10" :key="n" class="item">{{'tab4:'+n}}</div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import { TabContainer, TabContainerItem } from 'mint-ui';
import Vue from 'vue';

Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

export default {
  name: '',
  data() {
    return {
      selected: '1',
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .orderContainer {
    height: 100%;
    background: red;
    .mint-tab-container-item{
      padding-top: 44px;
      box-sizing: border-box;
      height: 100%;
      overflow-y: scroll;
    }
    .mint-tab-container-wrap{
      height: 100%;
    }
    .item{
      background: bisque;
      border: 1px solid coral;
      height: 200px;
    }
  }
</style>

你可以试一试这个代码。滑动tabcontainer的时候就会出现。你可以多滑动几次试一试

[xuzhiguang]

@JerryYuanJ http://res.xuzhiguang.com/#/detail/1 苹果手机打开，点击详情下面就能看到闪烁，未开启滑动，浏览器未找到对应的样式，安卓手机正常，怀疑是ios自带的什么特效

[jingxiawl]

@JerryYuanJ 上面发了下我用的代码。你可以试一试

[JerryYuanJ]

@xuzhiguang 我在iphone6 IOS11.4版本上试了 没有你说的那种闪烁。。。。

[JerryYuanJ]

@jingxiawl 好的，有空试试

[jaxonly]

PR #1418

[ghost]

@jingxiawl 我也遇到了这个问题，请问解决了吗

[Menusyes]

好多都遇到这种情况，官方也不给解决下