Hi everyone,

I'm a web developer working on a small, interactive web app, and I've hit a really strange, browser-specific bug that I'm hoping someone here might have some insight on.

The problem is a CSS animation loop. I have a simple "shake" animation that should trigger on a user action and last for about half a second. It works perfectly on desktop browsers (including Opera) and on Chrome for Android.

However, on Opera for Android, the animation gets stuck in an infinite loop. The element just keeps shaking forever. I've nicknamed this the "merge fellas unlimited shake" bug because it started happening right after I merged the code for a new component (a JS module I call 'fellas.js') into my project.

Here is a very simplified version of the JavaScript that triggers the animation:

function triggerShake() { // Prevent stacking animations if one is already running if (myElement.classList.contains('shake-animation')) { return; }

myElement.classList.add('shake-animation');

// Remove the class after the animation is done (700ms) setTimeout(() => { myElement.classList.remove('shake-animation'); }, 700); }

// Event listener myElement.addEventListener('click', triggerShake);