Skip to content

Conversation

@smgv
Copy link
Contributor

@smgv smgv commented Dec 8, 2025

…fix blur issue

Description

Rive animations were appearing blurry in the MetaMask extension UI. This was caused by LavaMoat policy overrides that restricted access to devicePixelRatio and other viewport-related globals for the Rive packages.

This PR removes the unnecessary LavaMoat policy overrides for:

  • @rive-app/canvas - removed devicePixelRatio: false restriction
  • @rive-app/react-canvas - removed the entire override section (which restricted devicePixelRatio, innerHeight, innerWidth, matchMedia, etc.)

By removing these overrides, the Rive packages can now properly access devicePixelRatio to render animations at the correct resolution for the user's display, preventing blur on high-DPI/Retina screens.

Jira Link: https://consensyssoftware.atlassian.net/browse/SL-370

Open in GitHub Codespaces

Changelog

CHANGELOG entry: fixed Blurry Metamask logo in the welcome page

Related issues

Fixes:

Manual testing steps

  1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

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.

Note

Grants Rive packages access to devicePixelRatio and key viewport globals and removes restrictive LavaMoat overrides across browserify/webpack configs.

  • LavaMoat policies (browserify: beta, experimental, flask, main):
    • @rive-app/react-canvas>@rive-app/canvas: enable devicePixelRatio.
    • @rive-app/react-canvas: enable IntersectionObserver, ResizeObserver, innerHeight, innerWidth, matchMedia, and devicePixelRatio.
  • Policy overrides:
    • Remove restrictive @rive-app/react-canvas overrides from lavamoat/browserify/policy-override.json and lavamoat/webpack/{mv2,mv3}/policy-override.json (previously disabled devicePixelRatio, innerHeight, innerWidth, matchMedia, observers, etc.).

Written by Cursor Bugbot for commit 3372c03. This will update automatically on new commits. Configure here.

@smgv smgv requested a review from a team as a code owner December 8, 2025 11:06
@smgv smgv self-assigned this Dec 8, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 8, 2025

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.

@smgv smgv requested a review from chaitanyapotti December 8, 2025 11:06
@metamaskbot metamaskbot added the team-onboarding Onboarding team label Dec 8, 2025
@smgv smgv added the needs-qa Label will automate into QA workspace label Dec 8, 2025
@smgv
Copy link
Contributor Author

smgv commented Dec 8, 2025

@metamaskbot update-policies

@metamaskbot
Copy link
Collaborator

metamaskbot commented Dec 8, 2025

✨ Files requiring CODEOWNER review ✨

📜 @MetaMask/policy-reviewers (7 files, +28 -61)
  • 📁 lavamoat/
    • 📁 browserify/
      • 📁 beta/
        • 📄 policy.json +7 -7
      • 📁 experimental/
        • 📄 policy.json +7 -7
      • 📁 flask/
        • 📄 policy.json +7 -7
      • 📁 main/
        • 📄 policy.json +7 -7
        • 📄 policy-override.json +0 -11
    • 📁 webpack/
      • 📁 mv2/
        • 📄 policy-override.json +0 -11
      • 📁 mv3/
        • 📄 policy-override.json +0 -11

Tip

Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers.

@smgv smgv linked an issue Dec 8, 2025 that may be closed by this pull request
@github-actions github-actions bot added the size-S label Dec 8, 2025
@smgv
Copy link
Contributor Author

smgv commented Dec 8, 2025

@MetaMask/policy-reviewers

  1. Performance & Responsiveness:
  • ResizeObserver - Automatically detects canvas size changes to keep animations crisp
  • devicePixelRatio - Prevents blurry graphics on high-DPI/retina displays
  • innerWidth/innerHeight - Handles window resizing for responsive layouts
  1. Optimization:
  • IntersectionObserver - Can pause animations when off-screen to save resources
  • matchMedia - Detects device capabilities and screen changes
  1. Advantages:
  • Automatic canvas scaling without manual code
  • Sharp rendering across all devices
  • Better performance through smart resource management
  • Responsive layouts work out of the box

Security: These are standard, safe browser APIs with no security concerns. They're read-only observation APIs that don't access sensitive data.

For ref: https://github.com/MetaMask/metamask-extension/pull/36113/files/1526ee13c3dbf56867e80e3fc63a72ab7f82e4d2#r2454873505

cc: @chaitanyapotti @lwin-kyaw

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Browserify build still blocks devicePixelRatio access

The PR removes devicePixelRatio: false overrides to fix Rive animation blur, but this only works for webpack builds where the base policy.json already has devicePixelRatio: true. For the browserify build, the base lavamoat/browserify/main/policy.json has devicePixelRatio: false for both @rive-app/react-canvas>@rive-app/canvas and @rive-app/react-canvas. Simply removing the override won't enable access - the override needs to be changed to devicePixelRatio: true to override the base policy's denial. Without this, the blur fix won't work in browserify-built versions.

lavamoat/browserify/policy-override.json#L65-L89

},
"@rive-app/react-canvas>@rive-app/canvas": {
"globals": {
"AudioContext": false,
"DOMMatrix": false,
"FinalizationRegistry": false,
"Iterator": false,
"MouseEvent": false,
"ResizeObserver": false,
"crypto": false,
"define": false,
"h": false,
"importScripts": false,
"location.href": false,
"prompt": false,
"readline": false,
"webkitAudioContext": false,
"fetch": false,
"XMLHttpRequest": false,
"document": false,
"document.createElement": true,
"navigator": false,
"navigator.userAgent": true
}
}

Fix in Cursor Fix in Web


@metamaskbot
Copy link
Collaborator

Policies updated.
👀 Please review the diff for suspicious new powers.

🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff

chaitanyapotti
chaitanyapotti previously approved these changes Dec 8, 2025
@metamaskbot
Copy link
Collaborator

Builds ready [ead5f88]
UI Startup Metrics (1277 ± 91 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1277104915069113391429
load105589512757810981178
domContentLoaded104888912657610901161
domInteractive22164672339
firstPaint509101127539710441145
backgroundConnect22620328114235248
firstReactRender4732128155576
getState3617124174061
initialActions107113
loadScripts831689104172873943
setupStore1473761527
numNetworkReqs86326623
BrowserifyPower User HomeuiStartup17701452258317318382089
load100783611869910941163
domContentLoaded99682611809710811146
domInteractive24165582543
firstPaint4528911693598901105
backgroundConnect21518564955218235
firstReactRender40337354249
getState18113067361184267
initialActions102112
loadScripts80163096895883942
setupStore1476881432
numNetworkReqs68562061866103
WebpackStandard HomeuiStartup81671393345836895
load63356679050669727
domContentLoaded62856278350664723
domInteractive22154672240
firstPaint22974786169196683
backgroundConnect1262971528
firstReactRender54341803347123
getState241498112841
initialActions102112
loadScripts62556078049661721
setupStore1062731116
numNetworkReqs86336629
WebpackPower User HomeuiStartup13861104176913914641677
load68355598284727866
domContentLoaded67654797483720854
domInteractive241587112547
firstPaint33081878237624772
backgroundConnect4965416989139
firstReactRender46378364756
getState19414361468212263
initialActions102011
loadScripts67454597282718852
setupStore1464481335
numNetworkReqs67581131265101
FirefoxBrowserifyStandard HomeuiStartup12441074180812213101454
load102091414628310551171
domContentLoaded101991414628310541171
domInteractive52302193265130
firstPaint------
backgroundConnect37211372339101
firstReactRender34288373549
getState107687923
initialActions103012
loadScripts99689613627610311147
setupStore1046971022
numNetworkReqs86265724
BrowserifyPower User HomeuiStartup25831552332257231073258
load1578948246553921192304
domContentLoaded1577947246553921192304
domInteractive9832114719876189
firstPaint------
backgroundConnect122231028122178255
firstReactRender523497135682
getState1427430547161230
initialActions204123
loadScripts1520933229350120102276
setupStore744111917040316
numNetworkReqs69431181472104
WebpackStandard HomeuiStartup15281299195813515901889
load1235106214147512881370
domContentLoaded1234106214147512881370
domInteractive56251492979127
firstPaint------
backgroundConnect4217110184789
firstReactRender423210094257
getState2262013714159
initialActions105112
loadScripts1210104613887312641343
setupStore15788101633
numNetworkReqs86275824
WebpackPower User HomeuiStartup27811777434958831763473
load18981118343751123032448
domContentLoaded18971118343651123022448
domInteractive122301189244791036
firstPaint------
backgroundConnect1882611272661781026
firstReactRender5634121155896
getState1418336453168250
initialActions218122
loadScripts17861102261646522222367
setupStore454112912524236
numNetworkReqs6954130136996
📊 Page Load Benchmark Results

Current Commit: ead5f88 | Date: 12/8/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±39ms) 🟡 | historical mean value: 1.03s ⬆️ (historical data)
  • domContentLoaded-> current mean value: 721ms (±36ms) 🟢 | historical mean value: 718ms ⬆️ (historical data)
  • firstContentfulPaint-> current mean value: 77ms (±13ms) 🟢 | historical mean value: 76ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 39ms 1.01s 1.33s 1.07s 1.33s
domContentLoaded 721ms 36ms 700ms 997ms 750ms 997ms
firstPaint 77ms 13ms 56ms 188ms 88ms 188ms
firstContentfulPaint 77ms 13ms 56ms 188ms 88ms 188ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 0 Bytes (0%)
  • common: 20 Bytes (0%)

@metamaskbot
Copy link
Collaborator

Builds ready [3372c03]
UI Startup Metrics (1335 ± 106 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup13351135173010613861526
load108791513168811321260
domContentLoaded108090813098711281252
domInteractive23174982442
firstPaint57187126243010791176
backgroundConnect22520532016232252
firstReactRender463497114971
getState3616144213990
initialActions103112
loadScripts8626791067849071032
setupStore1273741420
numNetworkReqs86306629
BrowserifyPower User HomeuiStartup18671556236714319432117
load1058891149610911521234
domContentLoaded1048882146510711411218
domInteractive2516156162553
firstPaint5128912313969681174
backgroundConnect265202714121233558
firstReactRender46387754854
getState18713731831201254
initialActions102012
loadScripts83867612511089261016
setupStore15103771434
numNetworkReqs68562051865105
WebpackStandard HomeuiStartup831715100459864958
load64456883560681770
domContentLoaded63956383160676766
domInteractive21154362238
firstPaint21082791149192660
backgroundConnect1253881429
firstReactRender56332343948144
getState23144982936
initialActions104112
loadScripts63655882960672764
setupStore1063741115
numNetworkReqs86337629
WebpackPower User HomeuiStartup15271193186817116721811
load7646001065105866910
domContentLoaded7565941057104857899
domInteractive26166482848
firstPaint283107868199256704
backgroundConnect50861412225524
firstReactRender50418575263
getState20914367366242296
initialActions103011
loadScripts7535921055104855896
setupStore1587281435
numNetworkReqs66571061166100
FirefoxBrowserifyStandard HomeuiStartup12591100158410613261454
load103994212536610901168
domContentLoaded103894212526710881168
domInteractive56311852983122
firstPaint------
backgroundConnect3718119184374
firstReactRender38307683855
getState1072641022
initialActions102112
loadScripts101692712276110501124
setupStore1063851023
numNetworkReqs86275724
BrowserifyPower User HomeuiStartup26001692408661931033529
load1589993327256721292488
domContentLoaded1589992327256721292487
domInteractive180321998335941012
firstPaint------
backgroundConnect153241228212186441
firstReactRender5539103135886
getState153781031108169258
initialActions207123
loadScripts1522971325353720532347
setupStore4253756933225
numNetworkReqs70571271669118
WebpackStandard HomeuiStartup15111304199712115731744
load1225108915468512761379
domContentLoaded1224108915468512761378
domInteractive59262063979133
firstPaint------
backgroundConnect47162152850102
firstReactRender413292104355
getState167172221453
initialActions102122
loadScripts1200106815248012471345
setupStore125121121121
numNetworkReqs86276724
WebpackPower User HomeuiStartup27471828399858231783648
load18371155294952522882604
domContentLoaded18371155294952522882604
domInteractive2462912653901171048
firstPaint------
backgroundConnect1672611972481811038
firstReactRender5638117146091
getState144761031103168245
initialActions208123
loadScripts17471132278849322182506
setupStore3643876728238
numNetworkReqs7157123147399
📊 Page Load Benchmark Results

Current Commit: 3372c03 | Date: 12/9/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±62ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 722ms (±59ms) 🟢 | historical mean value: 734ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 78ms (±37ms) 🟢 | historical mean value: 79ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 62ms 1.01s 1.57s 1.07s 1.57s
domContentLoaded 722ms 59ms 692ms 1.23s 732ms 1.23s
firstPaint 78ms 37ms 60ms 440ms 84ms 440ms
firstContentfulPaint 78ms 37ms 60ms 440ms 84ms 440ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 0 Bytes (0%)
  • common: 20 Bytes (0%)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs-qa Label will automate into QA workspace size-S team-onboarding Onboarding team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Should increase the resolution of the MetaMask Logo

4 participants