•  


Wrong measureInWindow value while using transform · Issue #2621 · necolas/react-native-web · GitHub
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

Wrong measureInWindow value while using transform #2621

Open
1 task done
Ginzoh opened this issue Dec 13, 2023 · 0 comments
Open
1 task done

Wrong measureInWindow value while using transform #2621

Ginzoh opened this issue Dec 13, 2023 · 0 comments
Labels

Comments

@Ginzoh
Copy link

Ginzoh commented Dec 13, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

After upgrading my React Native project from version 0.71.2 to 0.72.7 and react-native-web from 0.18.12 to 0.19.9, I encountered a problem with a modal on the web platform. Specifically, when clicking a button inside the modal, the dropdown menu appears misaligned.

Upon inspection, I found that the modal's inline style includes a transform property with translateX and translateY values, like so:

style
=
{
[

          {

            transform
: 
[
{
 translateX
: 
'-50%'
 }
,
 {
 translateY
: 
'-50%'
 }
]
,

          }
,

       ]
}

which it would seem is not being added by measureInWindow of useRef when the button is clicked because when I remove this styling the modal leaves the center and becomes aligned with the dropdown menu as it should be.
After testing on snack, it seems in previous versions (Expo 47 and 48), the values obtained from the measureInWindow function were accurate. However, after upgrading to Expo 49, the x and y values obtained from measureInWindow have changed (approximately +167 on x and +26 on y on the snack), leading to incorrect alignment.

Expected behavior

I would like Expo 49 to provide the same accurate values for measureInWindow as Expo 47 and 48, specifically "0 484.5" in the provided Snack example.

Steps to reproduce

  • Open the provided Snack link.
  • Switch to Expo 48 on the web view and observe the correct values on the screen "0 484.5".
  • Switch to Expo 49 on the web view and note the changed values on the screen "167 502".

Test case

https://snack.expo.dev/@ginzo/002cc1

Additional comments

No response

Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본