Aos: Fade-up not working on Firefox

Created on 30 Aug 2019  路  6Comments  路  Source: michalsnik/aos

The fade-up animation works fine on all browsers except on Firefox. Do you know how to fix this issue?

Most helpful comment

Just wanted to let you know that the issue was with the overflow. The container had
overflow: hidden . Due to that, the below content was not showing up. No issue with AOS 馃憤

All 6 comments

Hey! Can you:
-Post a link to an instance of the reproducible bug
-Firefox browser version
-Any Errors you're gettings as well

I have the same problem. The fade-up is not working on Firefox.

Firefox Version - 69.0.1
There are no errors.

I'm not sure if this has resurfaced?
https://github.com/michalsnik/aos/issues/245

I tried the solution from the above issue, the issue is still at large:
AOS.init({
startEvent: 'load',
});

I'll spend some time in the next few days to see if I can kick start a reproducible link on stackblitz.

Just wanted to let you know that the issue was with the overflow. The container had
overflow: hidden . Due to that, the below content was not showing up. No issue with AOS 馃憤

Okay! Great job finding the error!

In my case the magic works only correctly in Firefox, when i use the startEvent 'load' instead of 'DOMContentLoaded'.

Just wanted to bump this, I'm getting behavior where AOS' fade-up animation is only working intermittently and unreliably, and the element either does not become visible or flashes onto the screen and then disappears. This is on Firefox 75.0 (64-bit) on Ubuntu 18.04.4 LTS. The fade up animation works as expected on Chrome. There are no errors in the console, although Firefox does provide this warning:

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

There's an example visible here, the element in question is Newsletter form that's fixed position and is meant to fade up from the bottom of the viewport: https://unwinder2020.wpengine.com/

Did anyone find a good solution to this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hockey2112 picture hockey2112  路  4Comments

skube picture skube  路  4Comments

jodriscoll picture jodriscoll  路  4Comments

noisypope picture noisypope  路  4Comments

AndTheGodsMadeLove picture AndTheGodsMadeLove  路  3Comments