fix(perps): render perps toast via portal to escape CSS transform containing block#43613
Open
michalconsensys wants to merge 1 commit into
Open
fix(perps): render perps toast via portal to escape CSS transform containing block#43613michalconsensys wants to merge 1 commit into
michalconsensys wants to merge 1 commit into
Conversation
… block The Tabs component applies `transform-gpu` which creates a new CSS containing block, causing `position: fixed` toasts inside PerpsToastProvider to be positioned relative to the Tabs container instead of the viewport. This made close-all-positions toasts invisible on the home perps tab. Render the toast via `ReactDOM.createPortal` to `document.body` so it escapes any ancestor transforms, matching the pattern used by Modal.
michalconsensys
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Contributor
|
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. |
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/perps (2 files, +39 -16)
|
michalconsensys
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
michalconsensys
temporarily deployed
to
pr-comment
GitHub Actions
Inactive
Builds ready [a057d66]
⚡ Performance Benchmarks (Total: 🟢 15 pass · 🟡 10 warn · 🔴 0 fail)
Bundle size diffs
|
aganglada
approved these changes
Jun 17, 2026
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
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
The
Tabscomponent (ui/components/ui/tabs/tabs.tsx) applies the Tailwind classtransform-gpu, which translates totransform: translateZ(0). Per CSS spec, any ancestor with atransformcreates a new containing block forposition: fixeddescendants. This caused perps toasts rendered insidePerpsToastProvider(which sits inside the Tabs tree on the home screen perps tab) to be positioned relative to the Tabs container instead of the viewport — making them effectively invisible.This only affected toasts triggered from the perps tab (home screen). All other perps toasts (close single position, cancel order, edit margin, etc.) are triggered from dedicated perps pages inside
PerpsLayout, which is NOT a descendant of theTabscomponent and therefore unaffected.Fix: Render the perps toast via
ReactDOM.createPortal()todocument.body, escaping the CSS transform containing block. This follows the same portal pattern theModalcomponent already uses.Changelog
CHANGELOG entry: Fixed perps close-all-positions toasts not appearing on the home screen perps tab
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2852
Manual testing steps
Screen.Recording.2026-06-16.at.15.34.43.mov
Pre-merge author checklist
Pre-merge reviewer checklist