Firefox animation bug fix & discussion
Hey! I recently received a bug report that said the web version was behaving strangely. It turned out that this bug only appears in Firefox, and when I dug deeper, I found a lot of such bugs... The thing is that all browsers have some slight differences in how they interpret your code, which causes these bugs, and sometimes it costs you a lot of time to figure out what exactly is wrong, it's truly frustrating.
The main problem was that animations(especially character transitions) played WAY slower in Firefox than in Chrome. I've been trying to fix this problem all week and I think I finally got it right today! Now all animations in general run same in both Chrome and Firefox with no freezes.
I want to say thanks for your feedback and bug reports, they are really important and help me improve the game!
If you'd like to dive deeper in the solution it's right down the gifs
Here is how it was and how it is now(pls don't look her in the eyes, gif format makes them scary xD)

Solution:
Let me first say that my game is made using html, specifically react. After several rounds of trials and errors, I found that my problem could be cured by using requestAnimationFrame instead of setTimeout, which I was using earlier. So I redesigned the function
function animation() {
//animation code here
setTimeout(animation, 16);
}
to
function animation() {
//animation code here
requestAnimationFrame(animation);
}
However, having solved the problem of slow animation, another problem arose, the game was rendered not in 60 fps as it was designed before.
I tried to solve it this way:
let lastTime = performance.now();
function animation(){
if((performance.now() - lastTime)<16){
requestAnimationFrame (animation);
return;
}
lastTime = performance.now();
//animation code here
requestAnimationFrame (animation);
}
However, it didn't work, and ended up making it worse by causing weird behavior that I didn't expect.
After some study of the requestAnimationFrame function, it turned out that it renders animations depending on the user's frame rate. So I decided to add an animation speed adjuster that calculates the difference of my base rate (for a 100 Hz screen) and then adjusts it to the user's screen(defaultSpeed = defaultSpeed*100/userFrameRate) and it worked!
Unfortunately there is not much information on the internet about using and customizing requestAnimationFrame, I hope this can help other developers, feel free to share your thoughts or solutions if you ever had this promlem, thanks!
Files
Get SexEd Course
SexEd Course
Welcome to classes you've been wishing for! Dear students, please, prepare a couple of tissues beforehand.
Status | In development |
Author | AlmondRaf |
Genre | Visual Novel, Simulation |
Tags | 2D, Adult, Cartoon, Comedy, Eroge, Hentai, Male protagonist, No AI, NSFW |
Languages | English |
Accessibility | One button |
More posts
- Windows version release!18 days ago
- Chapter 1 goes public!46 days ago
- Chapter 2 is now available on Patreon!60 days ago
- Speed up feature60 days ago
- Polls on animation speed and anatomy partJan 28, 2025
- SexEd Course demo releaseJan 24, 2025
Leave a comment
Log in with itch.io to leave a comment.