Safari bug about rellax HOT 12 OPEN

Thx for the bug Pete. Most of this code was written by @p-realinho so let me check with him if there's an obvious solution

from rellax.

Hi. I could take a look at the code, but I have no way to test this in Safari :/

from rellax.

Thanks @moeamaya @p-realinho.

Attached is a screengrab of the issue in chrome vs safari. The rellax element is the yellow shard in the background. You can see the transform is quite far off in safari at the same page position (+1060px vs -30px).

If there's any way I can help to isolate the issue please let me know.

from rellax.

@moeamaya @petemcd @p-realinho Only a nightly spontaneous idea:
Maybe in Safari rellax get a wrong reference point or the reference point delivers some bad values?
@petemcd Can you share the test site with us in a Codepen or similar? Then i can help out with debugging.

from rellax.

Hi @acki, sorry about the delay. I think that might be the issue.

Here's a link to the test site (still needs some polishing 😅): http://terrydesign.co.uk/index.php/2017/index.html

from rellax.

@petemcd This is a super late reply and I know you've launched the site, but is this still an issue?

from rellax.

Also encountering this issue in safari @petemcd did you find a workaround for this?

from rellax.

I'm also having this issue. @petemcd @matteightarms did you guys ever find a workaround?

from rellax.

@MrUltimate No I didn't sadly! Sorry.

from rellax.

We recently experienced that issue, too. What solved it for us was using an Intersection Observer on all of the .rellax classes and call rellax.refresh() once the element is seen by the Observer (and then unobserve the element again). Feels like a rather nasty fix but worked out quite well.

from rellax.

@MrUltimate @matteightarms @guidoschmidt Happy to accept a PR that addresses this. Unfortunately just too preoccupied with family and the day job at the moment.

from rellax.

I've tried to understand the code of rellax.js a bit today. Really not sure, but it appears to me, that browsers differ in their way of returning getBoundingClientRect().top depending on their document loading lifecycle. See #180

Would be nice if someone could validate my suspicion and test is. I've also created a small test setup here: guidoschmidt/rellax.js.bug

from rellax.