Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

真机IOS ScrollView出现滚动条时,含有absolute属性的组件的某个子组件会消失不见 #16499

Open
shipfi opened this issue Sep 8, 2024 · 1 comment
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-3 Version - 3.x

Comments

@shipfi
Copy link

shipfi commented Sep 8, 2024

相关平台

微信小程序

复现仓库

https://github.com/shipfi/customer-c-minimp.git
小程序基础库: 3.5.5
使用框架: React

复现步骤

1.问题现象:真机IOS ScrollView出现滚动条时,含有absolute属性的组件的某个子组件会消失不见

1.1 以下为Andriod端(正常)

https://github.com/shipfi/customer-c-minimp/blob/main/res/A1.png

1.2 以下为IOS端(有问题)

https://github.com/shipfi/customer-c-minimp/blob/main/res/A2.png


2. 产生此问题需要同时满足以下条件:

条件一:只有苹果手机真机出现问题,Andriod端不会出现问题

条件二:页面中使用了scroll-view组件,且视图超过一屏

条件三 :scroll-view组件下的children中含有absolute样式属性的子组件

https://github.com/shipfi/customer-c-minimp/blob/main/res/A5.png

产生问题的代码片段

相关代码:

  1. src\public-pages\pages\page-1\index.tsx

  2. src\public-pages\micropage\act-card\cards_1.tsx

期望结果

按钮组件正常显示

实际结果

在以上三个条件同时满足之下,底部按钮组件会莫名期妙的消失

另外,如果去掉scroll-view组件,则IOS测试正常;如果去除view的absolute属性,则IOS测试正常;如果元素控制在一屏之内,则IOS测试正常

环境信息

taro info
👽 Taro v3.4.11


  Taro CLI 3.4.11 environment info:
    System:
      OS: macOS 14.5
      Shell: 5.9 - /bin/zsh
    Binaries:
  Node: 14.15.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.4.7 => 3.4.7 
      @tarojs/components: 3.4.7 => 3.4.7 
      @tarojs/mini-runner: ^3.2.0 => 3.4.7 
  @tarojs/plugin-framework-react: 3.4.7 => 3.4.7 
      @tarojs/rn-runner: 3.4.7 => 3.4.7 
      @tarojs/runtime: 3.4.7 => 3.4.7 
      @tarojs/taro: 3.4.10 => 3.4.10 
      @tarojs/taro-rn: 3.4.7 => 3.4.7 
      @tarojs/webpack-runner: ^3.2.0 => 3.4.7 
      babel-preset-taro: ^3.2.0 => 3.4.7 
      eslint-config-taro: ^3.2.0 => 3.4.7 
      nervjs: ^1.5.7 => 1.5.7 
      react: ^17.0.2 => 17.0.2 
      react-native: ^0.67.4 => 0.67.4
@TheKonka TheKonka added V-3 Version - 3.x F-react Framework - React T-weapp Target - 编译到微信小程序 labels Sep 8, 2024
@TheKonka
Copy link
Member

TheKonka commented Sep 9, 2024

你给的 demo 也跑不起来啊,项目配置啥的都没有

This was referenced Sep 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-weapp Target - 编译到微信小程序 V-3 Version - 3.x
Projects
Status: Todo
Development

No branches or pull requests

2 participants