Safari bug

[petermcreaper]

In Safari (currently 10.0.2), the initial rellax element positions are incorrectly calculated unless a height is specified on the preceding containers/divs. Consequently, the 3d transforms are centered around a co-ordinate that is too far down the page. The more content is placed before the rellax element, the greater the error in the initial position. Testing in Chrome, the initial positions are calculated correctly.

I'm using the centering option var rellax = new Rellax('.rellax', {center: true});

Any ideas would be much appreciated.

[moeamaya]

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

[p-realinho]

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

[petermcreaper]

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.

[acki]

@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.

[petermcreaper]

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

[moeamaya]

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

[matteightarms]

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

[MrUltimate]

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

[matteightarms]

@MrUltimate No I didn't sadly! Sorry.

[guidoschmidt]

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.

[moeamaya]

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

[guidoschmidt]

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