Closed bear-ei closed 5 months ago
Does it work with 0.72, so the regression started with 0.73?
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.
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?
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.
我还没有修复的预计时间,但这是我们希望修复的问题,因为它是基本场景之一。
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>
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.
This change from upstream appears to be the culprit: https://github.com/microsoft/react-native-macos/commit/5f40f0800e64b4380d7897b2e8b9ff561d84b97c#diff-603b7dc6b8a6a1475051de116973331aa452b0c76cfa4f36cd413ac859e5534c
Environment
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
The transform style-related properties are valid on iOS, but not on macOS.
Reproducible Demo
No response
Additional context
No response