Tabs become taller when hovering, UI jumps

[Bilka2]

FF57, dark theme. When I hover over tabs the entire row of tabs is taller than normal. Could not fix it by removing the height properties from the hover stuff.

[wilfredwee]

Hi, can you provide me with your OS and screen resolution? Are you using userChrome-dark.css with the Dark Theme?

Having reproduction steps and maybe a video/gif would help as well.

[Bilka2]

Windows 10 (no creators update installed), 1080p. I'm just using userChrome.css, pasting the code into userChrome-dark.css does nothing (it does not apply). Here is a gif of what's happening: https://gfycat.com/SingleFirmAntlion

Another thing: The two most left tabs are pinned, the space left of them seems a bit too big.

[wilfredwee]

Interesting, I'll see if I can reproduce it over the weekend.

The space on the left is a potential enhancement.

[ErroneousBee]

Ive added a margin-top to one of the tab:hover rules, seems to have fixed it for me on the default theme:

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
  background-color: transparent !important;
  margin-top: 0px !important;
}

[DesaeverSiebe]

Oddly enough, I have a similar problem, but not the exact same. When you look at his example, his tabs don't move and his + icon next to the tabs does. Whereas it's the opposite for me.

(ErroneousBee's above suggested fix does not work for me)

(Windows 7, default theme)

[HappyPony]

@ErroneousBee Your fix worksn't for Light theme. Can you say me, how can I make one fix for Light theme?

[ghost]

Confirming on Linux, default theme. Bug only shows up with the menubar enabled. ErroneousBee's fix did the trick! Thanks!

[bhrgunatha]

Linux here with default theme and even with @ErroneousBee's fix I see the same jumping behaviour as @DesaeverSiebe - I have menubar and bookmark toolbar enabled too.

[Likivik]

Linux, Default theme here. Bug showed up for me regardless of menu or bookmark bars being enabled, but @ErroneousBee's fix works for me

[rotan-hanrahan]

Annoying jumps when hovering over tabs on Win10. Took a quick look at the CSS and stopped this problem by going to the / Regular tabs / part and changing: min-height: 30px !important; to min-height: 29px !important; in both places where it occurred. This one pixel change did the trick for me. I'm sure this is only part of a proper fix (or might even be distracting from what the real issue is). YMMY.

[alphp]

Fix in PR #37

[wilfredwee]

Thanks for the fix! I will resolve this.

Release: https://github.com/wilfredwee/photon-australis/releases/tag/v0.3.2

[Bilka2]

Can confirm that this fix works for me.