White Vim Vixen Console frame always visible at bottom of GitHub pages

[asampal]

trafficstars

I'm opening this issue because:

• I'm reporting a bug

Description

The Vim Vixen iframe with id vimvixen-console-frame is always showing, even when the extension is not being actively used, on GitHub pages. The content of the frame is empty/white.

Steps to Reproduce

-use Firefox Nightly

• go to GitHub site
• observe white area at the bottom of page

System configuration

• Operating system: Windows 11
• Firefox version: Nightly 102.0a1
• Vim-Vixen version: 1.2.3

[jackysee]

Same here. It happens to the sites that applied the CSS color-scheme: dark.

[adudenamedruby]

Yep, also seeing this.

[diimdeep]

Yup, this makes plugin unusable.

[Vis5]

+1. I'm currently working around this issue by using Custom CSS add-on. Would love to see it fixed.

[Aiedails]

Also for Nightly 103.0a1 on Plasma 5.24.5 Archlinux 5.18.2-arch1-1

[SoundZero]

I also get the fat white bar at the bottom for many sites, but not all. I'm using FF Developer Edition 102.0b7 (64-bit). Seems the "vimvixen-console-frame" iframe is to blame...

[gi1242]

Just FYI, Firefox 102.0 hit Arch today, and this bug is present there. It's going to affect a lot more users now...

[debnath-d]

Just FYI, Firefox 102.0 hit Arch today, and this bug is present there. It's going to affect a lot more users now...

Exactly! Came here after the update.

People familiar with web development might open the dev tools in their browser and figure out the white bar being caused by this particular add-on, but others won't even be able to figure out what's causing the issue.

[jackysee]

+1. I'm currently working around this issue by using Custom CSS add-on. Would love to see it fixed.

@Vis5 what's your work around css?

[majewsky]

This workaround CSS works for me:

.vimvixen-console-frame {
  color-scheme: light !important;
}

[AsianKoala]

Yep just got this after Firefox updated to 102.0 on the AUR.

[jackysee]

@keyb0ardninja because you still need to use the console

[debnath-d]

@keyb0ardninja because you still need to use the console

Just realized after commenting and deleted my comment before seeing yours 😅

[InvisibleRain]

Same on https://scoop.sh/

[wraiford]

As a temporary workaround until this gets fixed, it's possible to disable Vim Vixen using the blacklist fuctionality in the extension's preferences:

"blacklist": [
    "github.com/*",
    "*.mozilla.org/*"
]

[pfr-dev]

This is not just an issue for GitHub pages, I get this on most web pages and tbh I'd rather use my mouse than disable dark mode.

[jessarcher]

I think the issue has something to do with https://fvsch.com/transparent-iframes

If I add the following to src/console/index.html then it seems to make the iframe transparent again, however, it's briefly still white while the page is loading:

<meta name="color-scheme" content="light dark">

Edit: This seems to fix it for GitHub, but it adds a new dark box to the bottom of Twitter :angry: I still think the issue has something to do with how Firefox now handles the background color of iframes.

[pfr-dev]

@jessarcher Thanks for sharing that article, it would seem that is precicely the issue. As a Firefox user, and as the article suggests, I may be stuck until Firefox implements the opaque iframe logic.

[jessarcher]

@jessarcher Thanks for sharing that article, it would seem that is precicely the issue. As a Firefox user, and as the article suggests, I may be stuck until Firefox implements the opaque iframe logic.

I think the problem is that Firefox has implemented the opaque iframe logic. So now, when the website has a CSS color-scheme that doesn't match the vim-vixen iframe (currently none) it gives it an opaque background.

I think the trick might be getting the iframe to detect the color-scheme of the parent page and then setting its own color-scheme to the same value so that Firefox will use a transparent background on the iframe.

[jessarcher]

I think the trick might be getting the iframe to detect the color-scheme of the parent page and then setting its own color-scheme to the same value so that Firefox will use a transparent background on the iframe.

I have a PR with this solution at #1437. The white background was still briefly visible while the page is loading so I've also set the <iframe> height to 0px when the console is closed.

[noobaldrin]

Can anyone tell me how to install from github? This issue is really annoying.

[jman-schief]

Can anyone tell me how to install from github? This issue is really annoying.

@noobaldrin The instructions to build and install a fork of this WebExtension with this issue fixed are at this comment. There is no direct link for a ready-made package with the fix. Thanks @jessarcher for authoring #1437.

if you're not comfortable with that, as an alternative you can temporarily install another Firefox add-on and apply the workaround suggested at this comment.

[ouuan]

if you're not comfortable with that, as an alternative you can temporarily install another Firefox add-on and apply the workaround suggested at this comment.

That's what I use as a workaround now. But why don't you point out what the "another Firefox add-on" is? I don't think it is very helpful without the add-on name. I'm using Stylus. If you don't want to specify an add-on, even pointing out "custom CSS add-on" would help.

[jman-schief]

That's what I use as a workaround now. But why don't you point out what the "another Firefox add-on" is?

good point :) Any Firefox add-on able to override websites CSS is fine (such as Stylus). I randomly picked one and installed Custom CSS injector.

[pataquets]

Kudos and thanks to those fixing this! :rocket: Any ETA for a fix release to be published for those now comfortable with installing outside Mozilla Addons Store? looks quite convoluted... :disappointed: /cc @ueokande

[xxSkyy]

Another implementation of https://github.com/ueokande/vim-vixen/issues/1424#issuecomment-1169733896 fix.

1. Download stylish
2. Install this style
3. Profit

[hrqmonteiro]

Another implementation of #1424 (comment) fix.

1. Download [stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)

2. Install [this style](https://userstyles.org/styles/245566/vim-vixen-temporary-fix)

3. Profit

It literally doesn't fucking work.

Is there any useful solution? This seems to be a really easy thing to fix, wtf.

[nonetrix]

Another implementation of #1424 (comment) fix.

1. Download [stylish](https://addons.mozilla.org/en-US/firefox/addon/stylish/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)

2. Install [this style](https://userstyles.org/styles/245566/vim-vixen-temporary-fix)

3. Profit

It literally doesn't fucking work.

Is there any useful solution? This seems to be a really easy thing to fix, wtf.

There is no reason to be rude about it that won't get you anywhere in life.

[nonetrix]

This workaround CSS works for me:

.vimvixen-console-frame {
  color-scheme: light !important;
}

fixed it for me thanks

[rtrajano]

I dumped the fix into a UserScript. I use Violentmonkey so I'm not sure if this UserScript works in Grease Monkey. ~Works OK for a workaround except that the box is visible for that split second due to rendering.~

// ==UserScript==
// @name        Vim Vixen Vix
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       GM_addStyle
// @run-at      document-start
// @version     1.1
// @author      -
// @description Fixes white bottom bar on dark themed web pages when using Vim Vixen
// ==/UserScript==
GM_addStyle(".vimvixen-console-frame {height: 0px; color-scheme: light !important;}");

Works well now. Updated the Userscript, thanks @aleksandrs-ledovskis