[Dev Help] "Merge Fellas Unlimited Shake" bug only on Opera for Android?

himekiawa

himekiawa

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);

sgunhouse

sgunhouse Moderator Volunteer @himekiawa

@himekiawa Not a developer, but just to clarify - Opera for Android (as opposed to Opera GX for Android, Opera Touch, or Opera Mini) and type of device (tablet, phone, simnulator, or some combination thereof).

There are many cases of scripts not working in Mini under maximum compression, so I'm mostly trying to exclude that - but any other details of your test system may be helpful.