Skip to content

fix: prevent radio size wrong when font-size larged#2442

Merged
anlyyao merged 2 commits intodevelopfrom
feature/radio-size
Mar 11, 2026
Merged

fix: prevent radio size wrong when font-size larged#2442
anlyyao merged 2 commits intodevelopfrom
feature/radio-size

Conversation

@novlan1
Copy link
Collaborator

@novlan1 novlan1 commented Mar 11, 2026

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

fix Tencent/tdesign-mobile-vue#1575

💡 需求背景和解决方案

📝 更新日志

  • fix(组件名称): 处理问题或特性描述 ...

  • 本条 PR 不需要纳入 Changelog

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

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

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

@novlan1
Copy link
Collaborator Author

novlan1 commented Mar 11, 2026

问题分析

iOS 微信字体放大导致 Radio 选中效果不一致的根本原因:

iOS 微信的 WebView 提供了「字体大小调节」功能,其底层机制是通过修改 -webkit-text-size-adjust缩放文本相关的 font-size,但不影响 width/height 等盒模型属性。

_index.less 中,Radio 的图标容器 &__icon 存在以下样式:

width: @radio-icon-size;     // 24px - 不受字体缩放影响
height: @radio-icon-size;    // 24px - 不受字体缩放影响  
font-size: @radio-icon-size; // 24px - 被微信字体放大功能缩放!
overflow: hidden;             // 超出部分隐藏

选中态使用 SVG 图标组件 (CheckCircleFilledIcon / CheckIcon),这些图标通过继承 font-size 确定尺寸 → 字体放大后图标变大,但容器 width/height 不变,导致图标被 overflow: hidden 截断或错位。

未选中态使用 div + CSS 伪元素绘制圆环,用的是固定 px 值 → 不受字体放大影响。

→ 最终表现:选中和未选中的图标大小不一致

修复方案

_index.less 中做了两处修改:

1. 阻止 __icon 容器的字体缩放

&__icon {
  // ...
  -webkit-text-size-adjust: none;  // ← 新增,阻止微信 WebView 缩放 font-size
  // ...
}

2. 给 SVG 图标 __icon-wrap 添加固定尺寸

&__icon-wrap {
  display: block !important;
  width: @radio-icon-size;   // ← 新增,用固定 width 约束 SVG 尺寸
  height: @radio-icon-size;  // ← 新增,用固定 height 约束 SVG 尺寸
}

双重保险:即使 -webkit-text-size-adjust 在某些特殊场景下失效,SVG 图标也有固定的 width/height 来保证尺寸不变,确保选中和未选中状态的视觉效果一致。

@tdesign-bot
Copy link
Collaborator

tdesign-bot commented Mar 11, 2026

TDesign Component Repositories CI Test Open

Component Lint Test Build Preview
tdesign-vue 👀
tdesign-vue-next 👀
tdesign-react 👀
tdesign-web-components 👀
tdesign-mobile-vue 👀
tdesign-mobile-react 👀

@anlyyao anlyyao merged commit 482e2ff into develop Mar 11, 2026
4 checks passed
@anlyyao anlyyao deleted the feature/radio-size branch March 11, 2026 12:37
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.

[Radio 单选框] IOS端 - 微信字体大小放大导致选中效果不一致

3 participants