HTML Playback Lag in CasparCG Compared to Browser

General
1

I’ve noticed a consistent delay when rendering the same HTML page simultaneously in both a standard desktop browser and CasparCG’s HTML producer.

  • When the page includes scrolling animations (e.g., using transform: translateY), the browser updates immediately.
  • In contrast, CasparCG lags noticeably — the scrolling starts later and also stops later than in the browser.

You can see a clear example in this video:

Left side is Casparg.

Update is via socket.io. I can see socket messages are reaching at almost same time.

in caspar log
[2025-08-03 07:16:22.459] [info]    html[http://localhost:3000/CasparcgOutput] 1920 1080 50.000000 Log: scrollingTextStyle received : {"position":"absolute","transform":"translateY(43px)","willChange":"transform","width":1720,"padding":"0 100px","whiteSpace":"pre-wrap","fontSize":97,"lineHeight":"146px"} 1754185582459

in bowser log
scrollingTextStyle received : {"position":"absolute","transform":"translateY(43px)","willChange":"transform","width":1720,"padding":"0 100px","whiteSpace":"pre-wrap","fontSize":97,"lineHeight":"146px"} 1754185582487
2

I think this is expected; CasparCG is doing some frame buffering so that it can ensure that it doesnt run out of frames when performance gets a bit bursty, both in the producers and most consumers do this.

In addition, when running interlaced the first frame of HTML producer has some extra logic to ensure that it doesnt play the first frame of an animation twice, which often means delaying it by a frame to check if the animation continues. (CEF only gives us frames when something changes)

1 Like
3

Thank you for immediate response