Animation problem with `userChrome.tab.bottom_rounded_corner`

[Nomes77]

Describe the bug

There is a problem with the animation of the bottom_rounded_corners. When you select or hover a tab you see first the corners appearing and then the background of the tab. If I disable the following rule, there is no problem anymore:

button,
toolbarbutton,
stack,
vbox,
.toolbarbutton-icon,
#tabs-newtab-button > .toolbarbutton-icon {
  transition: background-color 1s var(--animation-easing-function) !important;
}
button:hover,
toolbarbutton:hover,
stack:hover,
vbox:hover,
.toolbarbutton-icon:hover,
#tabs-newtab-button:hover > .toolbarbutton-icon {
  transition: background-color 0.25s var(--animation-easing-function) !important;
}

You can see it very good when userChrome.tab.bottom_rounded_corner_edge of chrome is enabled

Expected behavior

The animation is also for the tab_bottom_corners

Screenshots

I was able to capture a screenshot midway: Also when loading of a tab is finished, you can can see it:

OS

Windows 10

OS - Others

No response

Firefox Version

108.0.1

Distribution

• [X] Original Lepton
• [ ] Lepton's photon style
• [ ] Lepton's proton style

Theme

• [ ] Light
• [ ] Dark
• [ ] Alpenglow (System: Light)
• [ ] Alpenglow (System: Dark)
• [X] System Default
• [ ] Others: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)

Theme - More Info

No response

user.js setup

user.js setup

userChrome.decoration.animate
userChrome.tab.connect_to_window
userChrome.tab.dynamic_separator
userChrome.tab.box_shadow
userChrome.tab.bottom_rounded_corner
userChrome.tab.bottom_rounded_corner.all
userChrome.tab.bottom_rounded_corner.edge

Additional context

No response

[Aleksandra0056]

So you think that animation is not filled within the tab width, but it is cropped?

[Aleksandra0056]

Well, if I am right, then the australis is affected too (Because I have it enabled).

[Nomes77]

Yes, australis is effected to. That animation is within the tab width. But the corners are put on top of it and are not animated. So, at least I, I see a second difference.

[Aleksandra0056]

I think that this would be difficult to fix, but maybe I am wrong. Because the bottom rounded corners are images and I think that it would be difficult to animate the bottom rounded corner images (or bottom rounded corner icons). The bottom rounded corner images are located here: https://github.com/black7375/Firefox-UI-Fix/tree/master/icons