picker 组件的蒙层和选择器应该渲染到 body 里面而不是当前上下文

[ppbl]

相关平台

H5

复现仓库

暂无

浏览器版本: chrome 88
使用框架: React

复现步骤

1. 使用 swiper 组件
2. swiper 组件里面使用picker 组件

期望结果

picker 正常相对于窗口定位

实际结果

遮罩层被限制在 swiper 里面

原因

swiper 组件内使用了 transform 属性，影响了 picker 组件的 fixed 定位

解决方法

picker 组件的蒙层渲染到 body 里面可以解决此问题

环境信息

Taro CLI 3.0.24 environment info:
    System:
      OS: macOS 11.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 15.6.0 - /opt/homebrew/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 7.4.0 - /opt/homebrew/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.24 => 3.0.24 
      @tarojs/components: 3.0.24 => 3.0.24 
      @tarojs/mini-runner: ^3.0.24 => 3.0.24 
      @tarojs/react: 3.0.24 => 3.0.24 
      @tarojs/runtime: 3.0.24 => 3.0.24 
      @tarojs/taro: 3.0.24 => 3.0.24 
      @tarojs/webpack-runner: 3.0.24 => 3.0.24 
      babel-preset-taro: 3.0.24 => 3.0.24 
      eslint-config-taro: 3.0.24 => 3.0.24 
      react: ^17.0.1 => 17.0.1 
      taro-ui: ^3.0.0-alpha.9 => 3.0.0-alpha.9 

[ppbl]

大概原因是 swiper 组件中使用的 transform 属性影响到了 picker 组件的 fixed 定位

picker 组件的蒙层渲染到 body 里面的话应该就可以解决这个问题

(似乎使用 custom element 的话，不像 react 有 Portal 这么方便。。。 )