Skip to content

Ellipsis 更新后出现的bug #6792

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.

Sign up for GitHub

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

Jump to bottom
Closed
hsjzhcq opened this issue Dec 6, 2024 · 2 comments · Fixed by #6797
Closed

Ellipsis 更新后出现的bug #6792

hsjzhcq opened this issue Dec 6, 2024 · 2 comments · Fixed by #6797
Labels
bug

Comments

@hsjzhcq
Copy link
Contributor

hsjzhcq commented Dec 6, 2024

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
@hsjzhcq hsjzhcq added the bug label Dec 6, 2024
@zombieJ
Copy link
Member

zombieJ commented Dec 6, 2024

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

@hsjzhcq
Copy link
Contributor Author

hsjzhcq commented Dec 6, 2024

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

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

hsjzhcq pushed a commit to hsjzhcq/fix-6792 that referenced this issue Dec 13, 2024
fix(Ellipsis): 非整数行高时，省略行数不符合预期 (ant-design#6792)
6f0a640
hsjzhcq pushed a commit to hsjzhcq/fix-6792 that referenced this issue Dec 13, 2024
fix(Ellipsis): walkingIndexes初始化覆盖计算结果,导致文本省略字数不符合预期 (ant-design#6792)
10cceed
hsjzhcq pushed a commit to hsjzhcq/fix-6792 that referenced this issue Dec 13, 2024
test(Ellipsis): 单测补充 (ant-design#6792)
13b2c06
@zombieJ zombieJ mentioned this issue Mar 11, 2025
Merged
zombieJ added a commit that referenced this issue Mar 11, 2025
@hsjzhcq @zombieJ
fix(Ellipsis): Handle some post-update issues (#6797)
b059698 
* fix(Ellipsis): 非整数行高时，省略行数不符合预期 (#6792)

* fix(Ellipsis): walkingIndexes初始化覆盖计算结果,导致文本省略字数不符合预期 (#6792)

* test(Ellipsis): 单测补充 (#6792)

* fix(Ellipsis): 调整setWalkingIndexes调用时机

* fix: 修复状态更新不同步问题

* chore: update comment

* chore: back of demo

---------

Co-authored-by: huang_cq <[email protected]>
Co-authored-by: 二货机器人 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(Ellipsis): Handle some post-update issues hsjzhcq/fix-6792
2 participants
@zombieJ @hsjzhcq