[Yoga 3] Wrong outcome of max-height percentage value #1655

New Issue

2024-05-17T05:10:52-07:00

TheAdamBorek commented

2024-05-17 05:10:52 -07:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Description

In React Native app we set a wrapper height to 200% and then another wrapper gets max-height set to 50% (resulting in that {children} should have max "100%" size). We do that for pan gesture overflow & animations.

       {/* Represented as red rect beloew*/}
        <Animated.View style={[{
            width: "100%",
            height: "200%",
        }, [...]]}> 
              {/* Represented as orange rect below*/}
              <View style={{
                width: "100%",
                maxHeight: "50%",
              }}>
                   {/* Represented as yellow rect below*/}
                    {children}
                </View>
        </Animated.View>
    );

With recent update from "react-native": "0.73.4" -> "react-native": "0.74.1" we have noticed that {children} is 2 times smaller than it used to be.

Here's html screenshot illustrating the behaviour on web:

Yoga fails to calculate the size for the orange rectangle.
Other rectangles are just there to mimic our React Native's <View /> setup
Source code of the html can be found below (as I've used it to yarn gentest)

Expected Behavior

Test to pass & to work the same as in html

Actual Behavior

Test fails

yarn gentest sample

Here's the html sourcecode

<div id="max-height-2times-smaller-than-height-showcase" style="display: flex; flex-direction: row; gap: 50px">
    <div id="max-height-doesnt-work"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div id="parent"
                style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                <div id="child"
                    style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                </div>
            </div>
        </div>
    </div>
    <div id="height-works-fine"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container-2" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div id="parent-2" style="height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                <div id="child-2"
                    style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                </div>
            </div>
        </div>
    </div>
    <div id="max-height-workaround"
        style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;">
        <div id="container-3" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;">
            <div style="height: 100%; border: green dashed 3px;">
                <div id="parent-3"
                    style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;">
                    <div id="child-3"
                        style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce ## Description In React Native app we set a wrapper height to 200% and then another wrapper gets max-height set to 50% (resulting in that `{children}` should have max "100%" size). We do that for pan gesture overflow & animations. ```tsx {/* Represented as red rect beloew*/} <Animated.View style={[{ width: "100%", height: "200%", }, [...]]}> {/* Represented as orange rect below*/} <View style={{ width: "100%", maxHeight: "50%", }}> {/* Represented as yellow rect below*/} {children} </View> </Animated.View> ); ``` With recent update from "react-native": "0.73.4" -> "react-native": "0.74.1" we have noticed that `{children}` is 2 times smaller than it used to be. Here's html screenshot illustrating the behaviour on web: ![CleanShot 2024-05-17 at 14 04 15](https://github.com/facebook/yoga/assets/3684577/eb2abb1e-f0c6-4ca2-9f00-ba92de2bb78b) - Yoga fails to calculate the size for the **orange** rectangle. - Other rectangles are just there to mimic our React Native's `<View />` setup - Source code of the html can be found below (as I've used it to `yarn gentest`) # Expected Behavior Test to pass & to work the same as in html # Actual Behavior Test fails ![CleanShot 2024-05-17 at 13 49 45](https://github.com/facebook/yoga/assets/3684577/a948fde0-1af1-43a9-996d-34449b961050) ## yarn gentest sample Here's the html sourcecode ```html <div id="max-height-2times-smaller-than-height-showcase" style="display: flex; flex-direction: row; gap: 50px"> <div id="max-height-doesnt-work" style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;"> <div id="container" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;"> <div id="parent" style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;"> <div id="child" style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;"> </div> </div> </div> </div> <div id="height-works-fine" style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;"> <div id="container-2" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;"> <div id="parent-2" style="height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;"> <div id="child-2" style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;"> </div> </div> </div> </div> <div id="max-height-workaround" style="height: 400px; width: 400px; padding-left: 10px; padding-right: 10px; border: black dashed 3px;"> <div id="container-3" style="height: 200%; padding-left: 10px; padding-right: 10px; border: red dashed 3px;"> <div style="height: 100%; border: green dashed 3px;"> <div id="parent-3" style="max-height: 50%; padding-left: 10px; padding-right: 10px; border: orange dashed 3px;"> <div id="child-3" style="height: 800px; padding-left: 10px; padding-right: 10px; border: yellow dashed 3px;"> </div> </div> </div> </div> </div> </div> ```

👍 2 👀 1

NickGerleman commented

2024-05-22 21:15:41 -07:00

(Migrated from github.com)

Thanks for reporting this! I’m going to carve out some time to debug this, since it’s a new regression. I suspect this is related to changes made to fix maxHeight behavior for multiline containers.

👍 1 🚀 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1655