Metamask-extension: Some users experiencing blank screen on Firefox

[danfinlay]

When opening the action view, some users report they are seeing a blank screen, and are unable to use MetaMask on Firefox.

From our zendesk issue 654:

Here is my log from the debugging tool:
Setting up Sentry Remote Error Reporting: PROD background.js:1:101140
Injecting MetaMask Mesh testing client background.js:1:1061539
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 "update" listeners added. Use emitter.setMaxListeners() to increase limit. background.js:1:1061539
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 "sync" listeners added. Use emitter.setMaxListeners() to increase limit. background.js:1:1061539
downloadable font: OS/2: Bad sTypoLineGap, setting it to 0: -64 (font-family: "helpscout-docs3" style:normal weight:normal stretch:normal src index:0) source: data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg6xAzIAAAC8AAAAYGNtYXDL+RqdAAABHAAAADxnYXNwAAAAEAAAAVgAAAA … cwBjAG8AdQB0AC0AZABvAGMAcwAzAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA unknown:1:79054
Content Security Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive. (unknown)
Content Security Policy: Ignoring unknown option 'none' (unknown)
Error: WebExtension context not found! ExtensionParent.jsm:861:13
Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: !function(){return function t(e,r,n){fun.... 3963:1
Promise resolved while context is inactive
inject.js:176
Error: WebExtension context not found! ExtensionParent.jsm:861:13
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://cb548bcb-c175-4033-b952-916998fbda2b/background.js
Source Map URL: ../sourcemaps/background.js.map[Learn More] (unknown)
Promise resolved while context is inactive
inject.js:176
Error: WebExtension context not found! ExtensionParent.jsm:861:13
Promise resolved while context is inactive
inject.js:176
Error: WebExtension context not found! ExtensionParent.jsm:861:13
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://cb548bcb-c175-4033-b952-916998fbda2b/background.js
Source Map URL: ../sourcemaps/background.js.map[Learn More] (unknown)
Promise resolved while context is inactive
inject.js:176
Error: WebExtension context not found! ExtensionParent.jsm:861:13

... this appeared after clicking to the MetaMask icon:
"Download the React DevTools for a better development experience: https://fb.me/react-devtools" ui.js:1:1786179
"Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details." ui.js:1:1106154
You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build. ui.js:1:2206584
"Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs" ui.js:1:2147054
"Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class" ui.js:1:2147054
Setting up Sentry Remote Error Reporting: PROD ui.js:1:5310
Source map error: TypeError: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://cb548bcb-c175-4033-b952-916998fbda2b/ui.js
Source Map URL: ../sourcemaps/ui.js.map[Learn More] (unknown)

[bdresser]

from #4501

Versions 4.7.2-4.7.3 both opening the 'action view' with a blank screen, reports firefox user Underdoggie on our slack.

having a re-draw problem with MetaMask loading the first time. The window is white.

[fordarnold]

I'm having this issue of Firefox :angry: It seems to be working in Chrome tho.

[Platinumwrist]

I'm having leading issue on metamask chrome and it could be network connection signal's are strong and 15 min of trying to connect little frustrating but all worth I believe and suggestions

[hkegittel]

I can confirm blank screen in all versions of Metamask since 4.7. In my case, the browser is Firefox 52.4, running Slackware Linux 14.2 on 64 bit architecture. Reinstalling Metamask 3 eliminates the issue.

[fordarnold]

@hkegittel doesn't that mean you lose some important (security) features by downgrading to Metamask 3?

[hkegittel]

@fordarnold Sure it does.. but it beats not being able to access the wallet in the meantime, isn't it. Maybe the devs figure this out and fix the problem in future releases.

[mallapurbharat]

Yes, I too am facing this same issue with Metamask 4.8.0 on Firefox 61.0.1 (64-bit) on Ubuntu. The metamask window opens up with a white blank window. However, if I resize the window even slightly, the controls are then displayed properly. Seems like a window sizing event is not firing, or not being captured properly or some paint event maybe(?).

Initial state of window:

After resizing the window using resize handles, it displays properly

[ghost]

@mallapurbharat Nice, it works.
Logic seems to be that if if Metamask is fresh and TOS need to be shown, ui behaves correctly. After that only empty ui flash. I'm not able to try resizing because that flash is too fast. However, after "Pin to overflow menu"-action I was able to open it with wrong width as pictured.

[estebanmino]

@mallapurbharat @hhakala were you able to type in password inputs ? I'm trying to reproduce what you said, I have changed the popup size as you and I still get the same wrong behavior

Which version of Firefox are you using? Firefox snap version works fine, the issue happens in Firefox installed with sudo apt install firefox

[ghost]

@estebanmino I'm able to paste seed in text area, but touching password inputs makes it disappear again. Firefox 61.0.1

[mallapurbharat]

@estebanmino @hhakala I'm able to input all fields without issues. Metamask 4.8.0 on Firefox 61.0.1 (64-bit) on Ubuntu. I am not using the snap version of Firefox (as far as I remember).

@hhakala Have you tried going to the settings menu, and then selecting "Try Beta!"? The UI is much better and you can pop the metamask into a new tab so that you don't have to keep facing the issue of disappearing window.

[ghost]

@mallapurbharat Settings menu is actually missing from top right corner. New tab instead of popup UI sounds like a excellent update, only if I could enable it somehow.
Metamask 4.8.0.

[Catley94]

I'm also having this issue, I'm on FireFox developer edition (V62.0B8(64Bit)).
I've attached a screenshot. Please advise :)

[estebanmino]

@Catley94 @hhakala @mallapurbharat Thanks for the feedback, we're working on that update!

[estebanmino]

Related to the blank screen issue on Firefox / Ubuntu 18.04, there is a way to fix it
https://consensys.zendesk.com/hc/en-us/articles/360007617432

@Catley94 this should fix your problem

[estebanmino]

@hhakala @mallapurbharat the issue that you mentioned is related to notifications #4796

[meherett]

fix by: https://consensys.zendesk.com/hc/en-us/articles/360007617432