Taro: next 版本在部分android 手机上 随机无规律 element 不显示

[aniu2016]

相关平台

H5

浏览器版本: Mozila/5.0 （Linux；Android 9；V1938CT Build/PPR1.180610.011; wv） AppleWebKit/537.36 (KHTML，like Gecko)Chrome/62.0.3202.84 Mobile Safari/537.36 VivoBrowser/8.2.16.1
使用框架: React

复现步骤

在此系统自带的浏览器上, 随机无规律(暂时没找到规律) 部分element显示, 部分element不显示, 刷新后出现的问题也是一致, 在其他手机上(如iphone 6s ios13.3 iphone XSmax 13.6 小米...)无问题

期望结果

h5版本 兼容常见android手机

实际结果

在部分安卓手机上， dom 不能正常显示

环境信息

� Taro v3.0.8

Got less variables: {
  scaleNormal: '1',
  scaleSmaller: '0.8',
  scaleLarger: '1.35',
  scaleHuge: '1.5',
  userInfoHeight: '384px',       
  userInfoIconSize: '76px',      
  userInfoFooterHeight: '120px', 
  logoSizeSmall: '90px',
  logoSizeLarge: '120px',        
  goodsCellWidth: '240px',       
  goodsCellSpacing: '15px',      
  listCellIconSize: '150px',     
  listCellIconSizeSmall: '120px',
  iconSizeMini: '45px',
  iconSizeSmall: '90px',
  iconSizeLarge: '120px',        
  paddingMini: '4px',
  paddingSmall: '8px',
  paddingMiddle: '16px',
  paddingLarge: '24px',
  paddingHuge: '48px',
  fontSize: '32px',
  fontSizeMini: '22px',
  fontSizeSmaller: '26px',
  fontSizeLarger: '36px',
  fontSizeHuge: '45px',
  userInfoFooterBg: '#464645',
  userInfoHighlight: '#cfb716',
  fontColorHighlight: '#c7a56b',
  fontColor: '#9e9e9e',
  fontColorThin: 'lighten(@fontColor, 20%)',
  fontColorBold: '#363636',
  linkColor: '#44a0d4',
  primaryColor: '#dfc385',
  secondaryColor: '#bebebe',
  successColor: '#0ebe95'
}

  Taro CLI 3.0.8 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
      npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD

---

补充信息

手机品牌：vivo
型号: vivo x30
android 版本 : 9
vivo ROM: FuntouchOS_10
浏览器ua： Mozila/5.0 （Linux；Android 9；V1938CT Build/PPR1.180610.011; wv） AppleWebKit/537.36 (KHTML，like Gecko)Chrome/62.0.3202.84 Mobile Safari/537.36 VivoBrowser/8.2.16.1

经排查可能是与 stencil 中使其组件显示的css有关, classname hydrated , 该 class 将 visibility: hidden; 变更为 inherit 时, 没有触发浏览器重绘, (现代码中的临时方案是针对此类机型在 页面组件 componentDidShow中 对 body display 样式 手动设置为 none; 在设置个定时器 变更为block去hack)

[Chen-jj]

提供一下 demo

[aniu2016]

demo.zip

@Chen-jj

Demo中包含一个视频文件， 表述以上在vivo手机上出现问题

[zhangqijohn]

VIVO 绝大部分机型；
OPPO 部分机型 a79；
都会出现这个问题

[lujijiang]

这个问题很要命啊

[lujijiang]

要尽快解决。

[Chen-jj]

此浏览器兼容问题还没找到很好的办法去解决，可以这样先绕过，副作用是使用 visibility 样式时控制不了子元素：

// app.css
.hydrated {
  visibility: visible !important;
}