Aris-t2/CustomCSSforFx

[Firefox UI Fix conflict] The PiP icon in tab title is bouncing when constantly hovering with "css/generalui/close_icon_firefox3.css" enabled on userChrome.css

Closed this issue · 10 comments

Aleksandra0056 commented

1. Does the issue occur without any files inside /chrome/ folder?

No.

2. Issue description, userChrome.css/userContent.css 'settings' the issue occurs with and steps to reproduce the issue:

The PiP icon in the tab title is bouncing when constantly hovering with cursour when "css/generalui/close_icon_firefox3.css" is imported on the userChrome.css.

The icon itself appears when some video on a certain tab is at Picture-in-Picture mode.

3. Does the issue occur with the most recent version of CustomCSSforFx (release/test/dev build)?

Yes, I have the latest version as of writing.

4. Screenshots showing the issue (drag & drop images into this post):

I have a video:

2024-06-21.16-19-27.mov

5. System information

  • OS & OS version: Windows 10 19045.4529 (64-bit)
  • DPI/HiDPI/scaling value: 100%
  • Firefox version: v127.0.1 (64-bit)
  • Firefox theme: Firefox UI Fix
Aleksandra0056 commented

By the way here is my userChrome.css (in text format to be uploadable on GitHub):

userChrome.txt

Aris-t2 commented

Test this:
CSS.zip
It fixes favicon position for Fx 127.

Edit
I don't see a pip icon on tabs.

Aleksandra0056 commented

Test this: CSS.zip It fixes favicon position for Fx 127.

Edit I don't see a pip icon on tabs.

I tried to replace the entire CSS folder and cleared the startup cache, but the PiP icon is still bouncing. Can you try to use my attached userChrome.txt file (change .txt to .css) in your Firefox from my previous comment? (don't forget to make a backup)

Aleksandra0056 commented

I will show you how to make PiP icon on tab visible since it's a quite new feature.

Video:

2024-06-21.20-55-32.mov
Aris-t2 commented

Firefox does not provide that icon. Tested on a clean profile with current release and Nightly builds without any CSS.
It does not occur on tab.

Maybe your "Firefox theme: Firefox UI Fix" adds it to the tab.

Aleksandra0056 commented

Firefox does not provide that icon. Tested on a clean profile with current release and Nightly builds without any CSS. It does not occur on tab.

Maybe your "Firefox theme: Firefox UI Fix" adds it to the tab.

You are right. In vanilla Firefox the PiP icon isn't in the form of an icon but in the form of a label "Picture-in-Picture".

But since Firefox UI Fix implements that icon and I have enabled the Firefox 3 close button from CustomCSSforFx, there is some issue causing, that PiP icon bounce. I guess, that it has something with the close button & padding since the Firefox 3 close button (close_icon_firefox3.css) has noticeably smaller padding, then the PiP icon doesn't know which padding to choose (either the regular vanilla close button or the Firefox 3 close button).

Aris-t2 commented

I don't know the correct values your configuration requires, but you can add this to the end of your userChrome.css and modify the values until it works the way it should work with "Firefox UI Fix".

#TabsToolbar .tabbrowser-tab .tab-close-button {
  width: 18px !important;
  height: 18px !important;
  padding: 2px !important;
}

Browsers default values are 24px for width and height and 6px for padding.

Aris-t2 commented

Anything new here?

Aleksandra0056 commented

Anything new here?

I think, that this issue is unsolvable since neither the CSS code you wrote in the previous comment didn't help since the PiP icon is still bouncing.

Aleksandra0056 commented

I newly found, that css/generalui/close_icon_firefox3.css has nothing to do with this issue and, that it's probably an issue of Firefox UI Fix itself. Should we close this issue?

  • 👍1