1851175 - Visible jank in 60fps animation containing 2 alternating frames, no matter of approach taken

Status: UNCONFIRMED

(Core :: Layout: Images, Video, and HTML Frames, enhancement)

Description

[wojciech.czechowski]

Steps to reproduce:

I tried to create simple flickering animation that contains 2 alternating frames. No matter of taken approach (drawing on canvas with / without web worker, pure CSS, Web Animation API and even embbeding video with pre-prepared animation), browser is unable to run it smoothly, without visible jank.

Prototype page that shows the issue can be found here: https://dev.sfio.xyz/flickering-animation-bugs

The page contains all approches side-by-side with respective links to codepens, so that the code can be reviewed.

I suppose there is some issue with browser’s rendering engine.

What’s worth noting, I guess, is that Safari is able to play the embedded video smoothly (it struggles with all other approaches, just like Chrome and Firefox)

Comment 1

[Simona Badau, Desktop QA, PTO 22-30June]

Moving this to Core > Layout: Images, Video, and HTML Frames component to allow our engineers to examine it more closely. If this is not the right component, please move it to a more appropriate one. Thanks!

Comment 2

[wojciech.czechowski]

I recently conducted some tests to assess the feasibility of this type of animation. I would like to share the results with you, as it may help identify issues with the browser.

I prepared six different repositories, each containing a simple app. The only functionality of these apps is to flicker between two colored rectangles at 60fps. These apps are written in various technologies and for different platforms. Each repository includes a readme file with building instructions, allowing you to review both the source code and the working app. The links to the repositories are provided below. I can't wait for you to check them out and draw some conclusions.

Spoiler alert: The apps written in C++ with the SDL2 library (for all platforms), Kotlin, and SwiftUI work smoothly with the animation, without any visible glitches. However, the one written in Flutter (for all platforms) produces results very similar to those observed in the browser...

So, in principle, achieving jank-free animations on all platforms is possible. The introduction of jank seems to be located in the browser rendering implementation.

Mentioned links: 


1. ColourFlicker written in Kotlin [android]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_Kotlin_android
2. ColourFlicker written in SwiftUI [iOS]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_SwiftUI_iOS
3. ColourFlicker written in C++/SDL2 [windows]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_SDL2_windows
4. ColourFlicker written in C++/SDL2 [macOS]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_SDL2_macOS
5. ColourFlicker written in C++/SDL2 [linux]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_SDL2_linux

6. ColourFlicker written in Dart/Flutter [all platforms]: https://github.com/WojciechCzechowski-SmartFrame/ColourFlicker_Flutter_all-platforms