Absolute children do not respect padding of parent

[Joe Vilches]

Absolute children should begin layout at the origin of the content box assuming no insets are defined. Yoga lays the child out at the origin of the padding box. This does not appear to be an issue for relative children.

Expo: https://snack.expo.dev/@joevilches/spontaneous-green-turkish-delight

import {SafeAreaView, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.child} >
          <View style={styles.grandchild} />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    backgroundColor: "red",
    margin: 10,
    width: 200,
    height: 200,
    flexDirection: "row",
  },
  child: {
    backgroundColor: "blue",
    flex: 1,
    height: 200,
    width: 200,
    padding: 50,
  },
  grandchild: {
    backgroundColor: "green",
    height: 50,
    width: 50,
    position: "absolute",
    flex: 1,
  },
});

Web

Mobile

[Nico Burns]

Should probably also test for border, which affects the context box in a similar way to padding.

[rfvtgbzxc]

Should probably also test for border, which affects the context box in a similar way to padding.

In my test, the border attribute in https://www.yogalayout.dev/playground, children in absolute position respect the border of parent, while the padding attribute do not so. And in package 3.0.4, both border and padding are invalid for children those in absolute position.

[Nick Gerleman]

@joevilches, I can’t remember, did you make this better with absolute positioning work?

[Joe Vilches]

Yeah this should be resolved now, for both border and padding. I added #1650 just to make sure, which just mimics the test I had above. @rfvtgbzxc it looks like the playground link you sent is just the default one, can you click the link button in the top right of the code editor so I can see what you are testing?

[rfvtgbzxc]

Yes, may I represent about this? I just did a test on cases mentioned before.

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+AO6ZJcABYcATAFYADABoEm0jk1wOAFgDsekwAcwkyZlTYOARmMJHUYkw4TDQOACIwKmIoJnhSML4hERFxKVJhZMy5BSVCDMzM-0Dg0IQIqJi4sKN8gpE1DW0ynwMAUmrauqooODgoAFsOY06CswsrBAA2axq6kT4RpOTgAHoJaSWU9dJN5e2RkWzFZQPkoqCQ1HDI6Ni4eNm5+vUtcJb2x6fu3oGhz7mxthLBxpv9Mgs6rsUms0rtVts4dtZPJjoR0IoAB5sLyJEapaSnI65fCnETnEpXMo3Sr3DpPZ6NN4GNp0+nfPqDBDDemmcxAiag04QgpQ0Qwja1eGwjJSiWrcDQeD8IA

The test reflects the following phenomena:
1.The direct child node of a node which provides width/height directly has an error in calculating its own width and height through padding when the child has "position: 'absolute'".
2.When the child was contained with a new node as parent, they were calculated right (even the new parent didn't have "position: 'absolute'")
3.When the original parent change 'padding: 10' to 'borderWidth:10'， they were calculated right too without a new parent containing the original child.

Until now the latest release version is 3.0.4 and in package 3.0.4, both border and padding are invalid for children those in absolute position. But the 2ed phenomena still effect.

[Joe Vilches]

@rfvtgbzxc Thanks for the link! From my testing it seems that Yoga is working as expected and matching the web: https://jsfiddle.net/joevilches/xLj9rquf/1/.

Maybe you could be more specific as to what you see is wrong?

1. (blue box in web example) This child is positioned correctly and sized correctly. The positioning is from the content box as expected, the height is defined, and the width is 100% the size of the containing block's padding box.
2. (orange box) This new parent has no width or height defined. Because yoga's default flex direction is column, this means this node will have 0 height and width that will stretch to fill the container. As a result, 100% of the width means that it will be the size of the content box which it is.
3. You notice this because now the padding box is 80 instead of 100, so '100%' means something else. % with absolute nodes always refers the containing block's padding box.

[Nick Gerleman]

@rfvtgbzxc do you want the behavior to be that position stretches all the way to edge of box?

This behavior is inconsistent with web, but you can emulate the behavior of older Yoga by setting “AbsolutePositioningIncorrect” errata.

https://www.yogalayout.dev/docs/getting-started/configuring-yoga#layout-conformance-and-yoga-errata

[rfvtgbzxc]

Thanks a lot for your annotation, I could misunderstand the inner mechanisim of the flex layout.