ant-design/ant-design-mobile

Ellipsis 更新后出现的bug

Opened this issue · 2 comments

hsjzhcq commented

Version of antd-mobile

5.38.1

Operating system and its version

Others

Browser and its version

Google Chrome

Sandbox to reproduce

https://codesandbox.io/p/sandbox/practical-wu-74vqhm

What happened?

问题

1. 文本省略字数错误

5.37.1时 渲染符合预期
image
5.38.1时 被截取的文本过多
image

2. 特殊情况下，计算rowMeasureHeight值精度误差，导致省略行数错误

5.37.1时 渲染符合预期
image

5.38.1时 rows为2却渲染了一行
image

分析

  1. useLayoutEffect获取元素高度问题
    第一次计算的时候页面还没有展示元素，此时计算为59<=40为false，进行了文本分割，然后页面对文本进行了渲染
    image。
    第二次计算由requestAnimationFrame调用startMeasure触发计算，此时计算获取的元素节点还是未分割的文本的元素，
    image
    所以高度获取的时候还是59<=40，导致再一次进行了分割，所以出现文本被截断过多。

  2. rowMeasureHeight计算精度误差
    由于获取的是offsetHeight，获取的值会进行四舍五入，例如一行为 16.4px，两行时是32.8px，则会变为 33<=16*2命中false逻辑导致重新修剪文本，这种情况在移动端的rem转换下会比较容易出现。

可能解法

  1. 第一个问题比较奇怪，不知道为什么会出现页面渲染是新的，但是元素节点还是旧的。暂时没有想到比较好的解法。

  2. 加上0.5的误差处理，之前的Ellipsis的实现中就有rows+0.5的处理。或者使用getComputedStyle获取高度，可以保留小数位。

Relevant log output

No response

zombieJ commented

嗯，加一点浮动感觉的确好点。来个 PR？

hsjzhcq commented

嗯，加一点浮动感觉的确好点。来个 PR？

周末可以整一下。因为这个问题我还被提了一个bug😂

  • 👍1
  • 😄1