ASS subtitle blinks at the beginning for 1ms

[TS53]

This issue is only about the color, the subtitle otherwise works as expected.

In the following, the main color is gold, and no karaoke tags are used.
We can see, that always when a new line is rendered, it is rendered in white color (at least very short).
Immediately after this, the color is changed to the expected color.
Because of this, we can see a short "blink" for 1ms, which is a bit annoying.
Of course, this can only be seen when the main color is not white.

Here is a test file:

colorbug.zip

Probably, it also appears with karaoke tags, but I always start with white color there, so I can't see it there.

Tested on the webapp.
Of course, this bug is low priority, if there is no easy fix, feel free to close it.

[spessasus]

I can confirm this, I'll maybe look into this someday, so I'm leaving this as open.

[spessasus]

I've taken a look at it and it happens both on chromium and Firefox.

What's strange is that the color is set in the same function that makes the element visible, so it should be yellow instantly. I need to investigate...

[TS53]

Can you link to the file where the color is set and where the text is rendered the first time on the screen? I could then also guess about the problem.

[spessasus]

This is where the styles are applied and the element is added to the document:

SpessaSynth/src/website/js/utils/ass_manager/dialogue_event.js

Lines 400 to 459 in d450c2e

	// apply the style: formats are as follows:
	// Name, Fontname, Fontsize, PrimaryColour, SecondaryColour,
	// OutlineColour, BackColour, Bold, Italic, Underline,
	// StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle,
	// Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
	// font color
	this.element.style.color = this.secondaryColor;
	this.element.style.zIndex = (this.layer + 99999).toString();
	// font family and size
	const fontFamily = `${this.styleData["Fontname"]}, "${embeddedFontName}", sans-serif`;
	let fontSize = this.styleData["Fontsize"];
	// font size override tag ("\fs<font size>")
	if (this.text[0].startsWith("{\\fs"))
	{
	fontSize = this.text[0].slice(4, -1);
	}
	this.element.style.fontFamily = fontFamily;
	// fontSize. Scale px with resX and resY
	this.element.style.fontSize = `${(parseFloat(fontSize) / resY) * 0.8 * window.screen.height}px`;
	// bold, italic, underline, strikeout
	if (this.styleData["Bold"] === "1")
	{
	this.element.style.fontWeight = "bold";
	}
	if (this.styleData["Italic"] === "1")
	{
	this.element.style.fontStyle = "italic";
	}
	if (this.styleData["Underline"] === "1")
	{
	this.element.style.textDecoration = "underline";
	}
	if (this.styleData["StrikeOut"] === "1")
	{
	this.element.style.textDecoration = "line-through";
	}
	/**
	* @type {HTMLSpanElement[]}
	*/
	this.textChunks = [];
	for (const chunk of this.text)
	{
	if (!chunk.startsWith("{"))
	{
	const span = document.createElement("span");
	span.textContent = chunk
	.replaceAll("\\N", "\n")
	.replaceAll("\\h", " ")
	.replaceAll("\\n", "\n");
	span.style.color = this.secondaryColor;
	this.element.appendChild(span);
	this.textChunks.push(span);
	}
	}
	parent.appendChild(this.element);
	// force reflow
	void this.element.offsetHeight;

[TS53]

Thank you. We can see the a hint of the bug in line 406. this.secondaryColor is just white or undefined at this point (you can see it with console.log("secondaryColor: ", this.secondaryColor);). When we change this.secondaryColor = "red" before, we can see that the blink appears now in red.

A hacky solution would be to change the color to the expected color, before. Now, the blink still appears, but we can't see it anymore (like it happens for white color).

I think, a better solution would be to remove the blink. For me, it seems like the first element is rendered two times, but not sure.

Another guess is that the short blink at the beginning is the first wait time. With karaoke tags, we would have wait times at the beginning for like half a second. Then, for half a second the text is white. Here, the wait time is 0 ms. But maybe it is rounded to 1 ms or so which makes it appear.