Mute tab button's appearance breaks with too many tabs.

Sordid

The mute tab button normally is animated and overlays the favicon hiding it when media is playing. However, when too many tabs are open, the mute button's appearance breaks going off center and partially overlays the favicon causing it to partially appear.

Tested this on latest Vivaldi on Linux (6.8.3381.53 (Stable channel) stable (64-bit) ) on a new profile with default settings and theme.

edwardp

@Sordid I can confirm on Fedora. Display is 1920x1080, the mute icon is fine with one to 25 tabs open. Upon opening a 26th tab, is when its appearance changes, it becomes superimposed over the web site's favicon, as you have also shown.

Thank you for helping to make Vivaldi better.

Opened VB-108726

DoctorG

@edwardp said in Mute tab button's appearance breaks with too many tabs.:

Opened VB-108726

I confimed for Debian 12 & Windows 11.

Sordid

So this became more annoying as I found out that pinned tabs act the same way, so I came up with this CSS hack to sorta force it to be regular:

#browser:not(.alt-tabs) #tabs-container .tab.audio-on .favicon,
#browser:not(.alt-tabs) #tabs-container .tab.audio-muted .favicon,
#browser:not(.alt-tabs) #tabs-container .tab.tab-captured .favicon
{
  transform: scale(0) !important;
}

#browser:is(.theme-dark) #tabs-container .tab.tab-small.audio-on .tab-audio, #browser:is(.theme-dark) #tabs-container .tab.pinned.audio-on .tab-audio, #browser:is(.theme-dark) #tabs-container .tab.tab-small.audio-muted .tab-audio, #browser:is(.theme-dark) #tabs-container .tab.pinned.audio-muted .tab-audio, #browser:is(.theme-dark) #tabs-container .tab.tab-small.tab-captured .tab-audio, #browser:is(.theme-dark) #tabs-container .tab.pinned.tab-captured .tab-audio {
  transform: scale(1);
  background-color: rgba(0, 0, 0, 0);  
  padding: 0px;
  left: 6px;
  top: 6px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  filter: invert(1);
}

#browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).tab-small.audio-on .tab-audio, #browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).pinned.audio-on .tab-audio, #browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).tab-small.audio-muted .tab-audio, #browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).pinned.audio-muted .tab-audio, #browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).tab-small.tab-captured .tab-audio, #browser:is(.theme-light):not(.acc-light) #tabs-container .tab:not(.active).pinned.tab-captured .tab-audio {
  transform: scale(1);
  background-color: rgba(0, 0, 0, 0);  
  padding: 0px;
  left: 6px;
  top: 6px;
  bottom: 8px;
  width: 16px;
  height: 16px;
  filter: invert(1);
}

#tabs-container .tab.tab-small.audio-on .tab-audio, #tabs-container .tab.pinned.audio-on .tab-audio, #tabs-container .tab.tab-small.audio-muted .tab-audio, #tabs-container .tab.pinned.audio-muted .tab-audio, #tabs-container .tab.tab-small.tab-captured .tab-audio, #tabs-container .tab.pinned.tab-captured .tab-audio {
  transform: scale(1);
  background-color: rgba(0, 0, 0, 0);  
  padding: 0px;
  left: 6px;
  top: 6px;
  bottom: 8px;
  width: 16px;
  height: 16px;
}

I kinda managed to make it work on all themes that come default with the browser, and I tested it on multiple resolutions on compact and regular density. However, I can't guarantee this will work on other themes.