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: fix Affix placeholder height anomaly when chrome browser zoom is 80% #46823

Merged
merged 1 commit into from Jan 27, 2024

Conversation

zhipenglin
Copy link
Contributor

@zhipenglin zhipenglin commented Jan 5, 2024

[English Template / 英文模板]

🤔 这个变动的性质是?

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 工作流程
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

在使用Affix组件时,发现在chrome浏览器下缩放80%情况下,Affix内部的占位高度一直为0,缩放100%无此问题。
通过调试发现,在缩放为80%的情况下 placeholderRect.top为一个小数,例如:47.994789123535156,正常情况应该是48,导致getFixedTop函数计算结果异常。

通过增加Math.round方法消除这一结果

📝 更新日志

语言 更新描述
🇺🇸 英文 fix: fix Affix placeholder height anomaly when chrome browser zoom is 80%
🇨🇳 中文 fix: 修正 chrome 缩放为80%的情况下,Affix占位高度异常

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

Copy link

stackblitz bot commented Jan 5, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Jan 5, 2024

Preview Is ready

Copy link
Contributor

github-actions bot commented Jan 5, 2024

Visual Regression Report for PR #46823 Passed ✅

Target branch: master (32587d0)


Congrats! No visual-regression diff found

Copy link

codesandbox-ci bot commented Jan 5, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ff6e3a0:

Sandbox Source
antd reproduction template (forked) Configuration

Copy link

codecov bot commented Jan 5, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (a72ea64) 100.00% compared to head (ff6e3a0) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #46823   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          722       722           
  Lines        12443     12443           
  Branches      3265      3265           
=========================================
  Hits         12443     12443           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@li-jia-nan li-jia-nan changed the title feat:修正当chrome缩放为80%的情况下,Affix组件的占位高度异常 fix: fix Affix placeholder height anomaly when chrome browser zoom is 80% Jan 7, 2024
@li-jia-nan
Copy link
Member

能提供个录屏看一下复现步骤吗?我这没复现出来

@zhipenglin
Copy link
Contributor Author

能提供个录屏看一下复现步骤吗?我这没复现出来

6eaa3c97abc4f1c008a695ce498b3a0

7bf716116f555c32dc499951072804e

图一为打断点情况,offsetTop为48

图二为affix组件占位height异常为0的情况,只有缩放比例在某些值的时候会出现此问题,比如目前已知80%,110%都可以100%重现问题的

@afc163
Copy link
Member

afc163 commented Jan 10, 2024

@MadCcc 看看?

@MadCcc
Copy link
Member

MadCcc commented Jan 12, 2024

给一个可以复现的 codesandbox 吧,antd 官网 demo 无法按照你说的方法复现。

@zhipenglin
Copy link
Contributor Author

给一个可以复现的 codesandbox 吧,antd 官网 demo 无法按照你说的方法复现。

可以复现bug的例子项目地址:https://github.com/zhipenglin/affix-bug-example
演示地址:https://zhipenglin.github.io/affix-bug-example/

复现步骤:

  1. 正常打开演示地址页面
    1705373593686

  2. 将页面缩放比例调整至80%,并刷新页面
    1705373670410

  3. 发现占位div的高度为0px,导致下面Logo图片展示不完整
    1705373712335

@zhipenglin
Copy link
Contributor Author

@MadCcc

@li-jia-nan li-jia-nan merged commit f613db0 into ant-design:master Jan 27, 2024
68 of 69 checks passed
Copy link
Contributor

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献!如果您还没有加入钉钉社区群,请扫描下方二维码加入我们(加群时请提供此 PR 链接)。

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.

None yet

4 participants