Different handling of aspect ratio on flexible items compared to CSS about yoga HOT 3 OPEN

@NickGerleman spent some time digging into this. The issue is how the combination of aspectRatio + alignItems stretch is being treated in browser vs yoga. Aspect ratio is initially used to calculate the dimension in both browser and yoga but if the align items is set to stretch then the child will grow to the cross axis flex line dimension in browser whereas in yoga it'll always respect the aspect ratio. In the below line, if we don't consider aspect ratio when align items is stretch, we get the same result in browser and yoga.

Try below snippet without gap. It also varies between browser and yoga. I can also see some more inconsistencies in margin and aspect ratio behavior. There is some issue in how aspect ratio is treated compared to browser. I'll dig with the specs and update when I have more findings.

<View style={{ flex: 1, overflow: "scroll" }}>
  <View style={{ flexDirection: "row", backgroundColor: "red" }}>
    <View
      style={{
        flex: 2,
        aspectRatio: 1,
        backgroundColor: "blue",
      }}
    />
    <View style={{ width: 5 }} />
    <View style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          aspectRatio: 1,
          backgroundColor: "blue",
        }}
      />
      <View style={{ height: 5 }} />
      <View style={{ flex: 1, aspectRatio: 1, backgroundColor: "blue" }} />
    </View>
  </View>
</View>;

from yoga.

@intergalacticspacehighway great work, as always 🙂.

@nicoburns helpfully created #1295 a while back with a set of fixtures used by Taffy for aspect ratio, showing differences between Yoga and browser behavior. The story here being that aspectRatio in Yoga predates the aspectRatio property in CSS.

I will retitle this issue for clarity, since it seems like we think the root issue here is around Yogas handling of aspect ratio for flexible items (at least for stretched cross axis).

from yoga.

Related, even with the workaround I've posted (flexGrow), if you apply borderRadius to images, you'll notice they slightly go outside the container (the border radius gets cut off at the right bottom). I've ended up refactoring my workaround to use margins instead for this reason.

from yoga.