[Question about compatibility]

Ok after a series of tests by disabling / enabling various CSS properties indeed you were right if I remove background-attachment: fixed; then the result ends up being the same on both mobile and desktop (tiny scaled images everywhere instead of expected result).

[Question about compatibility]

9 minutes ago, ZachSaucier said:

Ya, sorry. I edited my post because it likely isn't background-attachment. Maybe it's background-size or background-position or something. Regardless it's not an issue with GSAP so we don't really have the capacity to look into it. Best of luck though! Post in this thread if you figure it out.

Indeed you're right, if I do I definitely will

 

7 minutes ago, ZachSaucier said:

Without looking at it too deeply it seems like a proper way to use it. Why do you ask?

Just wanted your opinion on it, I saw from the docs there was multiple ways to achieve the same result ^^

 

 

[Question about compatibility]

 

1 minute ago, ZachSaucier said:

I don't see that on my iPhone 8. What OS and browser are you using? It seems that whatever browser it is does not support background-attachment: fixed;. It might not be supported: https://caniuse.com/#feat=background-attachment

Oh that's weird ! I'm using :

• Samsung Galaxy 8+
• Chrome 79
• Android 9

Thanks for pointing me out to background-attachment, I indeed didn't know !

Sadly though, from the example I started from, it kinda looked mandatory for correct positioning (but again, I'm newbie when it comes to CSS).

It's also confusing because https://caniuse.com/#feat=background-attachment states it as supported on Chrome for Android 79.

 

Thanks a lot for your amazing work, support and being so reactive 😊

If you allow me one more question, does the way I use repeatRefresh with a function is a proper way to do with GSAP ?

[Question about compatibility]

desktop : 

mobile :

 

 

[Question about compatibility]

Ok you're right I've made 2 clumsy 😅videos to show my point but sadly I can't upload them (more than 0.49Mb).

I was looking to do some kind of glitch / "flickerish" effect, similar to the typical horror movie's effect with flickerish TV screen or to the 0:13 to 0:17 seconds of this video of Cyberpunk 2077 with their logo.

If you can visualize the result on desktop Chrome browser that's what I intended to do (subtle glitches on the image by moving around some parts of the image randomly, similar to the example I started from).

But if you visualize it on mobile browser it's actually completely different (being instead like tiny scaled copies of the main image moving around) and not what I expected.

 

Quote

Side note: Animating elements with CSS's filter performs pretty poorly on most mobile devices. I can hardly tell there's a blur anyway in this case so I might just remove it if I were you.

I agree with you on this point, it's hardly noticeable except on larger screen and only add a subtle touch but not much actually.

[Question about compatibility]

Hi guys !

I made a sample using the latest GSAP 3.1.1 and Vue.js 2.6.11,

I must admit I haven't done any web in years and I was wondering why it displays correctly on the browser while effect on the divs' background is quite different.

 

I know it's probably quite a lame question, probably related to some CSS properties not being supported on mobile, but I couldn't figure out which one(s) by looking at Chrome developer console and thought that you guys might surely know at first sight.

 

Any hint would be very much appreciated 😊

 

See the Pen ZEGEPZm by roms1383 (@roms1383) on CodePen