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

fix: Affix shake when switching from hide to show #38410

Merged
merged 2 commits into from Nov 7, 2022

Conversation

madocto
Copy link
Contributor

@madocto madocto commented Nov 6, 2022

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

fix: #37970

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fix Affix shake when switching from hide to show.
🇨🇳 Chinese 修复当 Affix 隐藏切换到显示时会出现抖动。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2022

@madocto
Copy link
Contributor Author

madocto commented Nov 6, 2022

let affixInstance: InternalAffixClass | null = null;
render(
  <AffixMounter
    getInstance={inst => {
      affixInstance = inst;
    }}
    offsetBottom={0}
  />,
);

await waitFakeTimer();
await movePlaceholder(300);

console.log(affixInstance!.state.affixStyle); // { position: 'fixed', bottom: 668, width: undefined, height: undefined }

hi,我想写一个测试用例,想对比滚动前后 affixStyle 的变化,但是发现 width 和 height 都是 undefined,能指导下我吗?

@afc163
Copy link
Member

afc163 commented Nov 6, 2022

jsdom 里元素尺寸和位置都是 0,需要对相关 dom 操作方法做 mock:https://github.com/ant-design/ant-design/blob/master/components/affix/__tests__/Affix.test.tsx#L75-L81

@codecov
Copy link

codecov bot commented Nov 6, 2022

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (516e2ff) compared to base (53c2be0).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #38410   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          446       446           
  Lines         8304      8310    +6     
  Branches      2526      2528    +2     
=========================================
+ Hits          8304      8310    +6     
Impacted Files Coverage Δ
components/affix/index.tsx 100.00% <100.00%> (ø)
components/table/util.ts 100.00% <0.00%> (ø)
components/_util/ActionButton.tsx 100.00% <0.00%> (ø)
components/alert/ErrorBoundary.tsx 100.00% <0.00%> (ø)
components/table/hooks/useSorter.tsx 100.00% <0.00%> (ø)
components/upload/UploadList/ListItem.tsx 100.00% <0.00%> (ø)
...date-picker/generatePicker/generateRangePicker.tsx 100.00% <0.00%> (ø)
...ate-picker/generatePicker/generateSinglePicker.tsx 100.00% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@afc163
Copy link
Member

afc163 commented Nov 7, 2022

图片

@madocto madocto changed the title fix: do not measure when Affix is hidden fix: Affix shake when switching from hide to show Nov 7, 2022
@madocto
Copy link
Contributor Author

madocto commented Nov 7, 2022

done

@afc163 afc163 merged commit 0438b0b into ant-design:master Nov 7, 2022
elevensky pushed a commit to elevensky/ant-design that referenced this pull request Nov 12, 2022
* fix: do not measure when Affix is hidden

* feat: add test
elevensky pushed a commit to elevensky/ant-design that referenced this pull request Nov 22, 2022
* fix: do not measure when Affix is hidden

* feat: add test
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tabs内有携带offsetTop属性的Affix时,切换会有残影抖动
2 participants