Issue with translateZ(0) on page load

[pedromagalhaes]

Hi, im not sure you are having this issue as well.

But on page load in latest version of Google Chrome, the sticky plugin is wrapping the element with a translateZ(0) CSS style, which makes the element to be invisible.

However, when I scroll down and the sticky occurs, the translateZ(0) CSS style is removed so the element is visible again.

Any configuration that makes this working properly?

Thank you

[joafeldmann]

having the same problem. did you find a solution?

[kyle-mccarthy]

I realize this issue is really old, but it looks like this can be controlled by the isIOSFixEnabled prop. This code seems to be responsible for adding the translateZ(0).

The reasoning for this is outlined in the comment:

To ensure that this component becomes sticky immediately on mobile devices instead of disappearing until the scroll event completes, we add transform: translateZ(0) to 'kick' rendering of this element to the GPU

So passing false for isIOSFixEnabled should resolve the issue.

[AmrHalim]

@kyle-mccarthy Unfortunately isIOSFixEnabled doesn't seem to be a valid property when I use the package in TS.

@gm0t thanks for the awesome package! However, this is a serious issue and it would really be great if you can either add a fix for it or give us a work around that we can use until it gets fixed.

Thanks.

[gm0t]

Hey @AmrHalim , could you please try [email protected] version?
I've migrated the library to TS, so isIOSFixEnabled should be available for you now