release(runway): cherry-pick fix: Popper.js used for dropdowns, tooltips, and popovers positioning cp-13.6.0 #36973
+2
−1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![runway-github[bot]](https://avatars.githubusercontent.com/in/86225?s=80&v=4){kind=small}
…ips, and popovers positioning cp-13.6.0 (#36967) ## **Description** This PR fixes an issue where Popper.js(used for dropdowns, tooltips, and popovers) fails to access `window.devicePixelRatio` in production builds due to LavaMoat scuttling. The issue was introduced by a recent @popperjs/core update in [PR #36557](https://github.com/MetaMask/metamask-extension/pull/36557/files#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2deR9408). The problem stems from [this upstream change in floating-ui](floating-ui/floating-ui#2229) which modified how Popper.js accesses the window object. - Popper.js now gets a reference to the real window via a DOM node rather than using the global window supplied to the LavaMoat compartment - LavaMoat's scuttling removes `devicePixelRatio` from the real global window object for security - The LavaMoat policy grants compartments access to specified globals, but Popper.js is trying to access them from the wrong window context - The upstream change was intended to handle iframe scenarios (pages with iframes where popovers from inside iframes render outside) Two approaches were considered: 1. **Patching Popper.js** - Would require ongoing maintenance with library updates 2. **Adding scuttling exception** - Simpler, more maintainable approach that follows existing patterns This solution was reached through collaborative investigation by @markstacey and @davidmurdoch, who identified the root cause, evaluated multiple approaches, and confirmed that the scuttling exception approach works effectively https://consensys.slack.com/archives/CTQAGKY5V/p1760559149075479 🙏 [](https://codespaces.new/MetaMask/metamask-extension/pull/36967?quickstart=1) ## **Changelog** CHANGELOG entry: null ## **Related issues** Fixes: #36951 Fixes: https://consensyssoftware.atlassian.net/browse/CEUX-468 ## **Manual testing steps** 1. Go to the latest build of the extension in this PR 2. Test UI components that use Popper.js: - Open dropdowns in the UI - Hover over elements that show tooltips - Test any popover menus 4. Verify that these components position correctly without console errors 5. Check browser developer tools for any `devicePixelRatio` related errors (should be none) ## **Screenshots/Recordings** ### **Before** Popper.js would fail to access devicePixelRatio in production builds causing positioning issues <img width="413" height="640" alt="Screenshot 2025-10-17 at 3 20 36 PM" src="https://github.com/user-attachments/assets/a04c16f2-7cdc-4b4b-b866-66917a2de87d" /> https://github.com/user-attachments/assets/91eb5594-1694-4718-804b-20613e6446bb ### **After** Popper.js components work correctly with proper positioning in all build types <img width="417" height="644" alt="Screenshot 2025-10-17 at 2 53 17 PM" src="https://github.com/user-attachments/assets/1bb75f03-a569-45f5-9da5-a6451fa33463" /> https://github.com/user-attachments/assets/2a2f13f1-a607-447b-bcf1-6631163f915c ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Adds `devicePixelRatio` to the default LavaMoat scuttle exceptions (and removes the test-only entry) so Popper.js can read it in production. > > - **Build/LavaMoat**: > - Add `devicePixelRatio` to default `scuttleGlobalThisExceptions` in `development/build/index.js` for `@popperjs/core`. > - Remove `devicePixelRatio` from the test-only exceptions list to avoid duplication. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit e27ff47. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
](https://codespaces.new/MetaMask/metamask-extension/pull/36967?quickstart=1){kind=link}
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Builds ready [90342ac]
UI Startup Metrics (1245 ± 69 ms)
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes an issue where Popper.js(used for dropdowns, tooltips, and
popovers) fails to access
window.devicePixelRatioin production buildsdue to LavaMoat scuttling. The issue was introduced by a recent
@popperjs/core update in PR
#36557.
The problem stems from this upstream change in
floating-ui
which modified how Popper.js accesses the window object.
rather than using the global window supplied to the LavaMoat compartment
devicePixelRatiofrom the real globalwindow object for security
but Popper.js is trying to access them from the wrong window context
with iframes where popovers from inside iframes render outside)
Two approaches were considered:
library updates
that follows existing patterns
This solution was reached through collaborative investigation by
@markstacey and @davidmurdoch, who identified the root cause, evaluated
multiple approaches, and confirmed that the scuttling exception approach
works effectively
https://consensys.slack.com/archives/CTQAGKY5V/p1760559149075479 🙏
Changelog
CHANGELOG entry: null
Related issues
Fixes: #36951
Fixes: https://consensyssoftware.atlassian.net/browse/CEUX-468
Manual testing steps
errors
devicePixelRatiorelatederrors (should be none)
Screenshots/Recordings
Before
Popper.js would fail to access devicePixelRatio in production builds
causing positioning issues
before720.mov
After
Popper.js components work correctly with proper positioning in all build
types
after720.mov
Pre-merge author checklist
Docs and MetaMask
Extension Coding
Standards.
if applicable
guidelines).
Not required for external contributors.
Pre-merge reviewer checklist
app, test code being changed).
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
Note
Expose
devicePixelRatioglobally in LavaMoat scuttle exceptions (moved from test-only) to restore Popper-based positioning.development/build/index.js):devicePixelRatioto globalscuttleGlobalThisExceptions(for@popperjs/coreand snap simple keyring site).devicePixelRatiofrom test-only exceptions (BUILD_TARGETS.TEST*).Written by Cursor Bugbot for commit 90342ac. This will update automatically on new commits. Configure here.
70832c2