Updating WebGL layer rendering during animation/interaction with the view

I have a WebGLVectorLayer object to which I apply this style:

layer.setStyle({
     'icon-src': './sprite.png',
     'icon-offset': ['get', 'offset'],
     'icon-size': [52, 52],
     'icon-scale': ['get', 'scale'],
     'z-index': 1
});

I have several methods inside my application that changes the icon-offset every 200ms to animate the sprite by changing the frame. I decided to use this method and not expressions to keep the full control and allow deeper interaction with the rest of my code.

But it seems that when I'm interacting with the map, or when a view animation is running, the updating of the frames stops (more info on my code in this issue).
I'm using requestAnimationFrame(); to handle the frame update.

I've tried using:

function animate() {
  map.render();
  window.requestAnimationFrame(animate);
}
animate();

and use layer.changed() whenever the frame is updated as suggested by jahow in this issue with no luck.

Am I missing something or this issue could be caused by something elsewhere in my code? I do have some "postrender" events here and there that changes other layers.

Start with the WebGLVectorLayer style using icon-offset and the requestAnimationFrame loop described here, then compare map.render() and layer.changed() while a view animation or map interaction is active. Review the related issues 17033 and 11250, including the postrender handlers, and build a minimal reproduction. Done means identifying whether OpenLayers stops the redraw or whether application code causes the frame updates to stop.