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.
Description
Explicitly setting
height: 15
on a parentView
and childText
on a device with a pixel ratio of3.5
(Pixel 7 Pro emulator) causes the childText
to render 1 px bigger than the parentView
due to rounding in Yoga. When theText
is given a small border (borderWidth: 0.5
) the bottom of the border is clipped by the parentView
. This only happens with a certain offset from top - achieved for example by settingmarginTop: 295
.There are several values and combinations of
height
andpixelRatio
that give this result. I've only observed this on Fabric, on old architecture it renders the same.Steps to reproduce
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 ); };
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, }, });
Stacktrace or Logs
Reproducer
https://github.com/zglapa/reproducer_view_text_size
Screenshots and Videos