[Webkit-unassigned] [Bug 287086] Captions on YouTube flicker as they animate
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Feb 5 07:33:57 PST 2025
https://bugs.webkit.org/show_bug.cgi?id=287086
--- Comment #1 from Antoine Quint <graouts at webkit.org> ---
Attached screen recording shows what goes wrong: as the bottom line slides upwards to make a new bottom line appear, it is removed and added back in position. There is a DOM mutation going on here to remove the former upper line and there is a timing issue involved here where the time where the transition completes and that original upper line is removed don’t quite align.
The CSS transition is triggered by toggling the `ytp-rollup-mode` CSS class on the container element with a `ytp-caption-window-rollup` CSS class:
```
.ytp-caption-window-rollup.ytp-rollup-mode .captions-text {
-webkit-transition: -webkit-transform .433s cubic-bezier(0, 0, .2, 1);
transition:transform .433s cubic-bezier(0, 0, .2, 1), -webkit-transform .433s cubic-bezier(0, 0, .2, 1)
}
```
If I adjust the .433s value here to, say, .6s then the issue is even more pronounced. It appears YouTube is using a fixed time value to toggle the CSS class instead of waiting on the `transitionend` event to be told when to make the change.
Indeed, if you run a search for 433 in their code you find that they call a function called `g.VQ` in their captions code with that value, and if you search then for `VQ` you can find that that parameter is set to a `this.EU` member which is eventually used in a call to `setInterval()`:
```
g.b.start = function() {
this.enabled = !0;
this.YZ || (this.YZ = this.yK.setTimeout(this.CJ, this.EU), this.XF = g.xw())
};
```
Assuming that that JavaScript callback and the CSS Transitions will align because they’re set to the same 433ms duration is wishful thinking, the browser is not supposed to guarantee that these will align.
As such I believe this to be an issue with YouTube.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20250205/67b799bb/attachment.htm>
More information about the webkit-unassigned
mailing list