Jump to content
Search Community

Question about compatibility

Roms13 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Hey Roms13 and welcome to the GreenSock forums!

 

It's not clear exactly what the issue is on mobile given you didn't describe it. On my phone everything animates the boxes are just a bit misplaced so that they don't align well with the main background image. Is that the error that you're wanting to fix? Or is it something that I'm not seeing?

 

I am pretty sure that the misalignment is just a CSS issue. You don't set the top or left properties of the .box. If you add top: 0; left: 0; to the .box on desktop it has behavior similar to the misalignment that I'm seeing on my phone. My guess is that if you set top: 0; left: 0; and align it correctly based on that it'll work as you want on mobile. I could be wrong though. In general it's a good idea to always set top and left on position: absolute elements.

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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 ?

Link to comment
Share on other sites

36 minutes ago, Roms13 said:

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.

Ya, sorry. I edited my post because it might not be 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.

 

36 minutes ago, Roms13 said:

does the way I use repeatRefresh with a function is a proper way to do with GSAP ?

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

Link to comment
Share on other sites

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 ^^

 

 

Link to comment
Share on other sites

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

Edited by Roms13
was ambiguous
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...