Text设置 webkit-line-clamp 及text-overflow 后在H5 里出现渲染异常

[xiehui999]

相关平台

H5

复现仓库

https://github.com/xiehui999/test.git
浏览器版本: Safari 版本13.1 (15609.1.20.111.8) ，以及手机浏览器
使用框架: React

复现步骤

1，mixin样式
@mixin line-ellipsis-x($lines) {
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp: $lines;
/* autoprefixer: ignore next */
-webkit-box-orient:vertical;
}

2， 创建页面A，B , 页面A给Text设置样式

.text-title {
color: aqua;
margin-top: 20px;
@include line-ellipsis-x(1)
}

3， 页面A条件渲染Text（loading 加载时为true，加载3s后设置false）
{loading ? 正在加载 : {title}}

2, yarn dev:h5 启动H5

3 ，在Safari浏览器以及手机浏览器访问，1行截断没有生效。跳转页面B，在返回页面A时截断生效

期望结果

首次访问时文本截断显示正常,显示一行文字，超出文字显示...

实际结果

首次访问没有截断显示...，点击按钮 跳转到另一个页面 后返回，显示正常,显示了截断...

环境信息

 Taro v3.0.6



  Taro CLI 3.0.6 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.3 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.6 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.6 => 3.0.6 
      @tarojs/mini-runner: 3.0.6 => 3.0.6 
      @tarojs/react: 3.0.6 => 3.0.6 
      @tarojs/runtime: 3.0.6 => 3.0.6 
      @tarojs/taro: 3.0.6 => 3.0.6 
      @tarojs/webpack-runner: 3.0.6 => 3.0.6 
      babel-preset-taro: 3.0.6 => 3.0.6 
      eslint-config-taro: 3.0.6 => 3.0.6 
      react: ^16.10.0 => 16.13.1 
    npmGlobalPackages:
      typescript: 3.9.7

---

补充信息

所有使用webkit-line-clamp 的页面，如果Text是条件渲染的，都会有问题，除非render第一次的时候就被渲染，则显示正常

[Fancy-X]

升级到3.0.21页遇到同样问题~

[Here21]

同样问题

[Chen-jj]

#6741

[Chen-jj]

3.1.0-beta.5 修复

[Fancy-X]

3.1.0-beta.5 修复

什么时候发正式的3.1.0呢

[Chen-jj]

3.1.0-beta.5 修复

什么时候发正式的3.1.0呢

之前有事又拖延了，今天发。