Text renders 1px bigger than View when explicitly given the same height with a specific combination of height and pixel ratio.
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
Explicitly setting height: 15 on a parent View and child Text on a device with a pixel ratio of 3.5 (Pixel 7 Pro emulator) causes the child Text to render 1 px bigger than the parent View due to rounding in Yoga. When the Text is given a small border (borderWidth: 0.5) the bottom of the border is clipped by the parent View. This only happens with a certain offset from top - achieved for example by setting marginTop: 295.
There are several values and combinations of height and pixelRatio that give this result. I've only observed this on Fabric, on old architecture it renders the same.
Steps to reproduce
- Enable new architecture
- Use the following code:
const print_height = (layout: LayoutRectangle, component: string) => {
const {height} = layout;
console.log(`${component}'s height = ${height}`);
};
const TestApp = () => {
return (
<View
style={styles.View}
onLayout={event => print_height(event.nativeEvent.layout, 'View')}>
<Text
style={styles.Text}
onLayout={event => print_height(event.nativeEvent.layout, 'Text')}>
kkkkkkkk
</Text>
</View>
);
};
const styles = StyleSheet.create({
View: {
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
height: 15,
marginTop: 295,
},
Text: {
fontSize: 8,
overflow: 'hidden',
height: 15,
borderWidth: 0.5,
borderRadius: 4,
},
});
- Run on a device/emulator with
pixelRatio: 3.5(ex. Pixel 7 Pro)
React Native Version
0.73.1
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx react-native info
System:
OS: macOS 13.5.2
CPU: (8) arm64 Apple M1 Pro
Memory: 100.84 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.8.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.21
path: /opt/homebrew/bin/yarn
npm:
version: 10.1.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.09.25.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10406996
Xcode:
version: 15.1/15C65
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.6
path: /usr/bin/javac
Ruby:
version: 3.2.2
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.1
wanted: 0.73.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
Stacktrace or Logs
n\a
Reproducer
https://github.com/zglapa/reproducer_view_text_size
Screenshots and Videos
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
该 issue 没有指出任何 repository 文件或测试。首先,在启用 Fabric 的 Android 设备或模拟器上使用 3.5 的像素比运行链接的 reproducer,然后跟踪 Fabric/Yoga 路径中的布局舍入行为。当明确相等的 View 和 Text 高度保持相等,并且半像素边框在报告的 reproducer 中未被裁剪时,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, react
- 领域
- mobile-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100