Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The transform style does not work in version 0.73.* #2038

Closed
bear-ei opened this issue Jan 17, 2024 · 7 comments · Fixed by #2102
Closed

The transform style does not work in version 0.73.* #2038

bear-ei opened this issue Jan 17, 2024 · 7 comments · Fixed by #2102
Assignees
Labels
bug Something isn't working Needs: Triage 🔍

Comments

@bear-ei
Copy link

bear-ei commented Jan 17, 2024

Environment

react-native -v: 0.73.2
npm ls react-native-macos: 0.73.6
node -v: 21.4.0
npm -v: 10.2.4
yarn --version: 1.22.19
xcodebuild -version: Xcode 15.0 Build version 15A240d

Steps to reproduce the bug

Adds transform style related properties to the element.

<View style={{ width: 50, height: 50, backgroundColor: 'red', opacity: 1, transform: [{scaleX: 2}, {translateX: 80}, {rotateX: '45deg'}], }}></View>

Expected Behavior

Correct rendering of transform style related properties.

Actual Behavior

截屏2024-01-17 18 14 21

The transform style-related properties are valid on iOS, but not on macOS.

Reproducible Demo

No response

Additional context

No response

@bear-ei bear-ei added the bug Something isn't working label Jan 17, 2024
@Saadnajmi
Copy link
Collaborator

Does it work with 0.72, so the regression started with 0.73?

@bear-ei
Copy link
Author

bear-ei commented Jan 18, 2024

Does it work with 0.72, so the regression started with 0.73?

This problem started with 0.73, 0.72 and earlier versions work fine.

@AdrianFahrbach
Copy link

Can confirm. I got the same issue!
It seems like translate is working fine, the other transforms are not working though.
@Saadnajmi Do you think that this is something that will be fixed soon?

@Saadnajmi
Copy link
Collaborator

I don't have an ETA for a fix yet, but it is something we'd like to have fixed since it's one of the basic scenarios.

@bear-ei
Copy link
Author

bear-ei commented Feb 29, 2024

我还没有修复的预计时间,但这是我们希望修复的问题,因为它是基本场景之一。

截屏2024-02-29 18 42 04

I don't know if this is the same problem. In my development, I found that when the transform property translateY is used to offset an element, the rendering is visually effective. But when I inspect the element it doesn't work, and its event triggers are kept at the position before the offset.

This problem occurs in 0.72.*.

<AnimatedContainer
            {...containerProps}
            shape="extraSmall"
            containerHeight={containerLayout.height}
            containerPageX={containerLayout.pageX}
            containerPageY={containerLayout.pageY}
            containerWidth={containerLayout.width}
            layoutHeight={height}
            layoutWidth={width}
            supportingPosition={supportingPosition}
            testID={`tooltip__supporting--${id}`}
            type={type}
            visible={visible}
            style={{
                opacity: renderOpacity,
                transform: supportingPosition?.startsWith('vertical')
                    ? [{translateX: -(width / 2)}]
                    : [{translateY: -(height / 2)}],       //➡️ Here, translateY is used
            }}>
            <Inner {...onEvent} testID={`tooltip__supportingInner--${id}`}>
                <SupportingText
                    ellipsizeMode="tail"
                    numberOfLines={1}
                    size="small"
                    testID={`tooltip__supportingText--${id}`}
                    type="body">
                    {supportingText}
                </SupportingText>
            </Inner>
        </AnimatedContainer>

@Saadnajmi
Copy link
Collaborator

Just a slight update, we're gonna try to pick this up in the next couple of weeks. I know that this is a pretty annoying regression in 0.73, and we recognize its importance.

@amgleitman
Copy link
Member

This change from upstream appears to be the culprit: 5f40f08#diff-603b7dc6b8a6a1475051de116973331aa452b0c76cfa4f36cd413ac859e5534c

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Needs: Triage 🔍
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants