Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vsiege

Fixed element moves slightly after user stops scrolling on Chrome for Android

Recommended Posts

Issue:

On mobile, an element (id = lens1_lens) I'd like stay fixed in the middle of the page, jumps up slightly after scrolling in Chrome for Android. This issue is not present on any desktop browser that I've witnessed.


Behind the scenes, I am using scrollTrigger to slightly move the faint fixed circle on scroll. CSS positioning-wise I am using the following:

 .home__lens {
position: fixed;
top: 50%;
left: 50%;
width: calc(100vh / 2);
height: calc(100vh / 2);
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.13) 95.34%, rgba(255, 255, 255, 0.2) 100%);
overflow: hidden;
transform: translate(-50%, -50%);
@include opacity(.88);
@include borderRadius(50%);
mix-blend-mode: normal;

@include mobile {
  width: 262px;
  height: 262px;
}
 }

I suspect it's partially due to vh on mobile, and how that's calculated. I would like to avoid using JavaScript to position if possible. Below is the public repo to my code  (GitHub pages project using Jekyll) as well as a live example to demo on mobile.

Repo

Live Experience (issue is evident on mobile [Chrome for Android, haven't tested on iOS yet])

Thanks for your help in advance.

Link to comment
Share on other sites

Hey vsiege. Would you mind creating a minimal demo of the issue using something like CodePen or CodeSandbox? You're much more likely to get a helpful answer if you do :) 

  • Like 1
Link to comment
Share on other sites

4 hours ago, ZachSaucier said:

Hey vsiege. Would you mind creating a minimal demo of the issue using something like CodePen or CodeSandbox? You're much more likely to get a helpful answer if you do :) 

Hi Zach,

Thanks for the suggestion. While I was able to create a pen, unfortunately the pen does not replicate the behavior as observed in the static live site. This is most likely due to the fact that it's embedded in another page.

 

If anyone is able to help, please use the live site below on link on Chrome, for Android (version 10) rather than the pen to observe the issue described above.

 

Note, on the live site I use:

{% include js/libs/gsap/3.5.1/gsap.min.js %}
{% include js/libs/gsap/3.5.1/EasePack.min.js %}
{% include js/libs/gsap/3.5.1/ScrollTrigger.min.js %}

 

Thanks for the community support.

 

 

Live Experience (issue is evident on mobile [Chrome for Android, haven't tested on iOS yet])

 

See the Pen poNzrZR by vsiege (@vsiege) on CodePen

 

 

 

Edited by vsiege
Exposing the version of GSAP
Link to comment
Share on other sites

You can use the debug view to test: https://cdpn.io/vsiege/debug/poNzrZR

 

I don't have an Android to test on at the moment. On my iPhone I see very minor jumps sometimes when scrolling up and down. Is that what you're talking about? My guess is that you won't be able to get rid of that unless you use smooth scrolling (i.e. separate the strict updating of the visuals from the scroll position). From what I can tell this isn't a bug in ScrollTrigger or your code, it is caused by the nature of scrolling being on a separate thread from the main JS thread which is much more noticeable on mobile. 

Link to comment
Share on other sites

On 1/28/2021 at 10:10 AM, ZachSaucier said:

You can use the debug view to test: https://cdpn.io/vsiege/debug/poNzrZR

Sweet! Thank you.

 

Thank you for reviewing. I have a theory that the translate that's getting applied via ScrollTrigger might be inducing this jumps. In CSS I set the fixed position of the circle (lens) to

transform: translate(-50%, -50%);

I am setting the X property in the trigger as such:

gsap.to("#lens1_lens",{
		x:"+=225",
		duration:12,
		scrollTrigger: {
			trigger:"#section2_sec",
			toggleActions: "none pause reverse pause",
			start: "top top+=75%",
			end: "bottom bottom",
			scrub: true
		}
	});

When triggered it looks like (depending on the deciding factors behind the scenes), either a plain translate or a translate3D gets further applied.  See the attached image. If there is a way to lock GSAP to only adjusting the X property, I can test this theory. 

 

Thanks for your help and hope you had a great weekend.

SS2021-02-01 at 11.20.01 AM.jpg

Link to comment
Share on other sites

You should always set the transforms of your elements with GSAP — not doing so is one of the most common GSAP mistakes. But I don't know that that would be the cause of this.

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

always set the transforms

Thanks. I have implemented the change (updated the demo on Codepen as well). Here's are all the changes I've made:

 

1 - Now setting x and y percent in my init():

gsap.set("#lens1_lens", {xPercent:-50 , yPercent:-50});

2 - Also, in my scroll triggers, I have changed them to percent as well:

xPercent:"+=25",
...
xPercent:"-=80",

 

3 - I assigned a pixel width and height to the circle (lens) for mobile + desktop in hopes that might help.

 

Observations while using Chrome dev tools to inspect the page on my mobile phone:

I am seeing the translate get applied twice (using Chrome dev tools to inspect). What I mean is after scrolling happens, you'll see the purple highlight applied to the style attribute blink twice.

 

I'm still observing the same behavior.

Link to comment
Share on other sites

I did some further digging @ZachSaucier, to confirm whether or not there was behavior change from desktop and touch-enabled environments, so I put a simple method to listen for what's being reported for window.innerHeight and found it. On desktop environments resize event does not get triggered (accept the one I manually trigger in the beginning to get the initial size), but on mobile it does. Meaning, on scroll for touch-enabled devices something is changing the height.

 

I have updated the demo and you can observe this behavior to verify the QA results (will need to be touch enabled device). There is a variance from original window.innerHeight that changes back a forth. Note, I call resize once on init() manually to establish the original window.innerHeight. I'd really like to get you opinion on this when you have a moment.

 

Thanks again 👍 for investing your time to review.

 

Chrome on Android: Using the Codepen in debug, here are my results (using Chrome dev tools to inspect the debug link):

1717
1850
1717
1850
1717
1850

Safari on iPhone: On the newest stable release of iOS, I can exhibit a jump on the X axis

 

Edited by vsiege
Conducting QA on iOS too
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.

×