When moving tabs, some separators are missing on the background tabs

I noticed that when moving tabs some background tabs are missing separators. For example, when moving tabs in Chrome, separators are dynamically added where they are needed.

On the picture below I have indicated with arrow where the separator should be:

I also recorded a video to demonstrate the problem in more detail. Note that the tabs that stood next to the tab being moved have missing separators: https://github.com/user-attachments/assets/723ed37c-dc7e-470d-9d5e-7a3333438607

I tried to fix this by rewriting the tab separator implementation, relying on the value of the “transform” property of the moving background tabs to solve this problem.

.tabbrowser-tab {
    position: relative;
}

/* add the separator before the tabs and for the last tab */
.tabbrowser-tab::before,
.tabbrowser-tab:last-of-type:not([visuallyselected], [selected], [multiselected="true"], :hover)::after {
    display: block;
    content: "";
    position: absolute;
    width: 1px;
    height: 50%;
    background-color: var(--panel-separator-color);
    top: 25%;
    z-index: 1;
    opacity: 1;     
}

.tabbrowser-tab::before {
    left: -1px;
}

.tabbrowser-tab:last-of-type:not([visuallyselected], [selected], [multiselected="true"], :hover)::after {
    right: 0;
}

/* remove the separator for the first tab, selected tab and the next tab, from the multiselected tabs and the next tab, on hover */
.tabbrowser-tab:first-child::before,
.tabbrowser-tab:is([visuallyselected], [selected], [multiselected="true"])::before,
.tabbrowser-tab:is([visuallyselected], [selected], [multiselected="true"]) + .tabbrowser-tab::before,
.tabbrowser-tab:hover::before,
.tabbrowser-tab:hover + .tabbrowser-tab::before {
    opacity: 0;
}

/* controlling opacity of separators of neighboring tabs when moving tabs */
#tabbrowser-tabs[movingtab] .tabbrowser-tab[style*="translateX("]:not([visuallyselected], [selected], [multiselected="true"]) {
    &::before {
        opacity: 0 !important;
    }
    &::after {
        display: block;
        content: "";
        position: absolute;
        width: 1px;
        height: 50%;
        background-color: var(--panel-separator-color);
        right: 0;
        top: 25%;
        z-index: 1;
        opacity: 1;
    }
}

#tabbrowser-tabs[movingtab] .tabbrowser-tab[style*="translateX(-"]:not([visuallyselected], [selected], [multiselected="true"]) {
    &::before {
        opacity: 1 !important;
    }
    &::after {
        opacity: 0 !important;
    }
    & + .tabbrowser-tab:not([style*="translateX(-"]) {
        &::before {
            opacity: 0 !important;
        }
    }
}

Final result: https://github.com/user-attachments/assets/dc999eb8-0b06-4cad-a3f0-caf74cfd2f1f

Please check if this works for you.

Enabled flags: Firefox Dev 131.0b3 userChrome.Tabs.Option2.Enabled userChrome.DragSpace.Left.Disabled

WaveFox v1.7.131 Firefox 131.0.3 Windows 11 23H2

QNetITQ / WaveFox

When moving tabs, some separators are missing on the background tabs #214