dialog, $layout: 'VIEW_BOX'阻止滚动时，弹窗不显示

[cleverboy32]

发现当页面使用 switch 去显示弹窗时， 弹窗不会显示。 但是如果用原生checkbox 发现是弹窗会正确显示，最后定位到是 switch.css 里面的一行代码, 初步推测出是 transform 对 fixed 的影响。希望可以得到帮助，谢谢。 问题显示链接

 &:before {
                    transform: scale(0);
           }
                &:after {
                    transform: translateX(20px);
                }

这里是我的代码

<template>
  <div id="app" class="diary">
    <group>
      <x-switch v-model="show" title="显示弹窗"></x-switch>
    </group>

    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo">
        <div class="img-box">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1520934999&di=e14e4652d10fbcf986b4eb706337e62a&imgtype=jpg&er=1&src=http%3A%2F%2Fa3.topitme.com%2F6%2Fc0%2F79%2F112176413527779c06o.jpg" style="max-width:100%">
        </div>
        <div @click="show=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>
import { XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom, ConfigPlugin } from 'vux'
import Vue from 'vue'

Vue.use(ConfigPlugin, {
    $layout: 'VIEW_BOX'
})

export default {
    name: 'app',
    directives: {
        TransferDom
    },
    data () {
        return {
            show: false
        }
    },
    components: {
        XDialog,
        XButton,
        Group,
        XSwitch
    }
}
</script>

<style>
.img-box {
    height: 170px;
    overflow: hidden;
}
.vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #999;
    width: 24px;
    height: 24px;
}

.vux-close:before,
.vux-close:after {
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 24px;
        height: 1px;
        background-color: currentColor;
        transform: rotate(-45deg);
}
.vux-close:after {
        transform: rotate(45deg);
}
</style>

[airyland]

测试无法重现。dialog 源码会在 layout 为 viewbox 时加上 vux-x-dialog-absolute。
请确定你有使用了 view-box 组件或者 100% 布局？

[cleverboy32]

我是 100% 布局， 请使用我给出的代码， 在苹果手机 safari 上可以出现问题。我的是 ipone 7p

[cleverboy32]

找到了解决方法就是，等switch 变形完成后再去显示弹窗。 但是在弹窗内部设置延迟显示却不行，只能在外部。

可以看一下这个，http://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/