No animation on CEF v95, fine in latest Chrome and Edge

[cr08]

Figured this would work better as a discussion thread than an issue since it's very likely something I have misconfigured.

In my current project, I have essentially two blocks of content I want to have separate sets of animations for, preferably one to be slightly delayed. I have my div containers set up as follows (truncated from my full file):

<div id="swup">
<div class="transition-flip"></div>
<div class="transition-fade"></div>
</div>

Both browser work:
Edge v103
Chrome v103

The ultimate intent is using this in an OBS Browser Source. Currently this utilized Chrome Embedded Framework (CEF) and is on v95 I believe. This is where it breaks down. The first transition element behaves fine. The second fade element works in the standalone browsers but on the CEF based browser source it just cuts the content over at the same time the first transition element swaps out its content from the target page.

I have enabled remote debugging so I can get to the console of the browser source but nothing really useful shows to indicate anything obvious is wrong. Essentially the same console messages I'd get on the standalone browsers.

Any suggestions on where I can start looking?

[hirasso]

Hi @cr08 , we can't really help here, since we don't have access to your specific environment.

One thing that I noticed looking at your example code, though, is that there are two transition-* elements. We recommend that you set the transition-[something] class on only one element for each page. All other elements you want to animate during page transitions should be animated independently (without using a separate transition-[something] class for each of them).