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

[dreamsynth]

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