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

fix: remove animation fill mode from modal frame #38716

Closed

Conversation

miguelpeixe
Copy link

Description

Fixes the positioning of Popovers inside Modals for Chrome and Safari.

With the animation fill mode set to forwards, the final step sets transform to a defined value. This makes position: fixed child elements position from the Modal's edge instead of the viewport.

More on position and containing blocks: https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block

Closes #8468.

Testing Instructions

  1. Using Chrome or Safari (this bug does not occur on Firefox), create a Modal with child Popover. Observe that it's mispositioned.
  2. Check out this branch and observe the Popover is now properly positioned.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

Fixes the positioning of Popovers inside Modals for Chrome and Safari.
With the animation fill mode set to `forwards`, the final step sets
`transform` to a defined value. This makes `position: fixed` child
elements position from the Modal's edge instead of the viewport.
@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Feb 10, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @miguelpeixe! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@skorasaurus skorasaurus added the [Feature] UI Components Impacts or related to the UI component system label Feb 27, 2022
@ndiego
Copy link
Member

ndiego commented Jul 5, 2022

@miguelpeixe I just tested #8468 and it appears to no longer be an issue in WP 6.0+. Therefore, while this PR is greatly appreciated, it likely is no longer needed. Can you confirm on your end that the positioning of popovers in modals is working correctly now?

@miguelpeixe
Copy link
Author

Thank you for reaching back, @ndiego! I was also able to confirm that this is no longer an issue. Closing the PR.

@miguelpeixe miguelpeixe closed this Jul 5, 2022
@miguelpeixe miguelpeixe deleted the fix/modal-popover-position branch July 5, 2022 14:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Popover position is incorrect if used within a Modal component
3 participants