fix vanishing list on firefox

[brad-decker]

So, this resolves the issue of disappearing components on firefox when scrolling. but I dislike removing this functionality for chrome that doesn't have a problem with it. How difficult would it be to add the browser we are building for as a classname to the HTML element during the build step? We could then enable or disable rules based on browser

Additional details:
There is interplay between position: sticky and z-index. If I change z-index to 0 less of the components disappear when scrolling, if I change it to -1 everything is great but the tabs are gone so :P

[Gudahtt]

Any idea what the underlying cause is here? e.g. maybe a Firefox bug?

[metamaskbot]

Builds ready [3443c69]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (648 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	84	38	11	5
		domContentLoaded	344	820	646	110	53
		load	346	822	648	110	53
		domInteractive	344	820	646	110	53

[brad-decker]

I don't even know, it doesn't have issues when in full screen, either... 🤕

Pretty sure there's a better solution -- at least I hope there is. I'll keep digging.

[Gudahtt]

How difficult would it be to add the browser we are building for as a classname to the HTML element during the build step? We could then enable or disable rules based on browser

This is certainly a thing we could do. I think it'd be pretty easy - we already inject things via envify. It's wouldn't be the worst solution. This feature is nice, but it's not critical.

[brad-decker]

@Gudahtt and @whymarrh this PR now adds static asset replacement feature to the build process, wherein each .HTML file has a class="browser-classname" added to the HTML element. Then, during static asset copying...instead of just copying them over we read the file, replace that browser-classname with chrome-browser or firefox-browser or whatever.. now we have the ability to override styling based on browser with no (little) runtime cost

[metamaskbot]

Builds ready [9301715]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (634 ± 33 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	92	42	17	8
		domContentLoaded	463	811	632	70	33
		load	465	813	634	70	33
		domInteractive	462	811	632	70	33

[whymarrh]

Well this escalated quickly.

[brad-decker]

It really got out of hand fast.

[whymarrh]

This isn't a bad solution, but I am curious whether or not there's a way for us to fix this in CSS.

[whymarrh]

I think we might be able to avoid all of this using the translateZ(0) hack.

In ui/app/components/ui/tabs/index.scss:

 @import 'tab/index';
 
 .tabs {
+  // Just for Firefox — https://github.com/MetaMask/metamask-extension/pull/8690
+  -moz-transform: translateZ(0);
+
   &__list {
     display: flex;
     justify-content: flex-start;

[brad-decker]

@whymarrh very interesting. that does fix the problem! Way better fix. Do you want to do the honors or should I close this and submit a new pr with that one liner?

[whymarrh]

I can open one up, sure.