Jump to content
Search Community

ScrollToPlugin IE10 incorrect scroll position

Archibald test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi

 

I am having a conflict I can't replicate. The solution works fine in the codepen(

See the Pen ddKVNw by artchibald (@artchibald) on CodePen

 

If you look at the codepen in IE10, the effect works perfectly (place div in center of viewport on click), but in my finished page, the scrollTo just goes all over the place and lands in a different position each time. It works fine in IE11 but not IE10 which is a requirement for my client.

 

I tried matching the codepen function exactly to my production functions but the error still occurs.

 

Here is a copy for your review that is condensed:

 


window.onload = function(){



// Scroll to X and Y position buttons
// bullet points
var logoBtn = document.getElementById("logo");
var section1Btn = document.getElementById("section1Btn");
var section2Btn = document.getElementById("section2Btn");
var section3Btn = document.getElementById("section3Btn");
var section4Btn = document.getElementById("section4Btn");
var section5Btn = document.getElementById("section5Btn");
var section6Btn = document.getElementById("section6Btn");
var section7Btn = document.getElementById("section7Btn");
// menu buttons
var firstnav = document.getElementById("firstnav");
var secondnav = document.getElementById("secondnav");
var thirdnav = document.getElementById("thirdnav");
var fourthnav = document.getElementById("fourthnav");
var fifthnav = document.getElementById("fifthnav");
var sixthnav = document.getElementById("sixthnav");
var seventhnav = document.getElementById("seventhnav");

var firstdot = document.getElementById("firstdot");
var seconddot = document.getElementById("seconddot");
var thirddot = document.getElementById("thirddot");
var fourthdot = document.getElementById("fourthdot");
var fifthdot = document.getElementById("fifthdot");
var sixthdot = document.getElementById("sixthdot");
var seventhdot = document.getElementById("seventhdot");

  // buttons on central spinning circle
var firstcirclebtn = document.getElementById("invisible-btn1");
var secondcirclebtn = document.getElementById("invisible-btn2");
var thirdcirclebtn = document.getElementById("invisible-btn3");
var fourthcirclebtn = document.getElementById("invisible-btn4");
var fifthcirclebtn = document.getElementById("invisible-btn5");
var sixthcirclebtn = document.getElementById("invisible-btn6");



// Scroll to Bullets

logoBtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
// Scroll to Start div id on page load
TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
// Scroll to Bullets
section1Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section2Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#seconddot", offsetY: $(window).innerHeight() / 2 - $('#seconddot').height() / 2, x:"#seconddot", offsetX: $(window).innerWidth() / 2 - $('#seconddot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section3Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#thirddot", offsetY: $(window).innerHeight() / 2 - $('#thirddot').height() / 2, x:"#thirddot", offsetX: $(window).innerWidth() / 2 - $('#thirddot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section4Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#fourthdot", offsetY: $(window).innerHeight() / 2 - $('#fourthdot').height() / 2, x:"#fourthdot", offsetX: $(window).innerWidth() / 2 - $('#fourthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section5Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#fifthdot", offsetY: $(window).innerHeight() / 2 - $('#fifthdot').height() / 2, x:"#fifthdot", offsetX: $(window).innerWidth() / 2 - $('#fifthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section6Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#sixthdot", offsetY: $(window).innerHeight() / 2 - $('#sixthdot').height() / 2, x:"#sixthdot", offsetX: $(window).innerWidth() / 2 - $('#sixthdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
section7Btn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#seventhdot", offsetY: $(window).innerHeight() / 2 - $('#seventhdot').height() / 2, x:"#seventhdot", offsetX: $(window).innerWidth() / 2 - $('#seventhdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};

// menu nav
// Scroll to Bullets
firstnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".first-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.first-coordinate-2').height() / 2, x:".first-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.first-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
secondnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-2').height() / 2, x:".second-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
thirdnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-2').height() / 2, x:".third-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
fourthnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-2').height() / 2, x:".fourth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
fifthnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-2').height() / 2, x:".fifth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
sixthnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-2').height() / 2, x:".sixth-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
seventhnav.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-2", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-2').height() / 2, x:".seventh-coordinate-2", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-2').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};


firstcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".second-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.second-coordinate-3').height() / 2, x:".second-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.second-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
secondcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".third-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.third-coordinate-3').height() / 2, x:".third-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.third-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
thirdcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".fourth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fourth-coordinate-3').height() / 2, x:".fourth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fourth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
fourthcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".fifth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.fifth-coordinate-3').height() / 2, x:".fifth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.fifth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
fifthcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".sixth-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.sixth-coordinate-3').height() / 2, x:".sixth-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.sixth-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};
sixthcirclebtn.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:".seventh-coordinate-3", offsetY: $(window).innerHeight() / 2 - $('.seventh-coordinate-3').height() / 2, x:".seventh-coordinate-3", offsetX: $(window).innerWidth() / 2 - $('.seventh-coordinate-3').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};


}(jQuery);


 

There are other jquery plugins I have used, so perhaps the conflict is from there?

 

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
      <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script>
      <!-- Bootstrap pre built stuff-->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

 

The console shows no errors so its hard to debug.

 

Any help would be greatly appreciated, it's the last obstacle of the project!

See the Pen ddKVNw by artchibald (@artchibald) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I would suggest that you log some of the values you are tweening to to verify that you are passing in the proper information.

 

For instance


 

section1Btn.onclick = function() {

//add some logs

console.log("offsetY", $(window).innerHeight() / 2 - $('#firstdot').height() / 2);

console.log("offsetX", $(window).innerWidth() / 2 - $('#firstdot').width() / 2;)




TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100);
};

 

run that in IE10 and IE11 side by side and make sure you get the same values.

 

If that works, then also try hard-coding the values for y:"#firstdot" and x:"#firstdot" just to help isolate where the mis-calculation may be.

 

If you can confirm that scrollTo plugin is not tweening to the proper values then please provide a reduced case that only has one or two buttons that don't tween properly in IE10. The less code the better. Perhaps there is something we will be able to see in developer tools.  Unfortunately, your live site is far too complex to dig into.

 

 

also, the script url for ScrollToPlugin is odd

 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js

 

Please be sure to use the most recent versions of TweenMax and ScrollToPlugin

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/ScrollToPlugin.min.js

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites

Thats what I do when I run into these kind of problems, I console log the living hell out of every value associated with it and it usually points the way to the issue.

 

Also verify that the target elements are where they are supposed to be in IE10. The centering equation itself looks right so I'm guessing this could be a positioning issue in the DOM rather than a scrollTo issue.

  • Like 5
Link to comment
Share on other sites

Hi

 

So I did the steps you mentioned.

 

Updated JS links to Scrollto, Jquery latest and Tweenmax. 

 

Did a console log, and the coordinate calculation is slightly different on IE10 - IE11.

 

At this point I was lost so I created a Codepen for you without all the excess code and the error is still there. At least this helps pin point it wasn't a conflict.

 

Here it is(to be checked in IE10 vs IE11):

 

See the Pen QQePBJ by artchibald (@artchibald) on CodePen

 

Let me know if you see anything.

 

Thanks again.

Archie.

 

Link to comment
Share on other sites

Ah, very interesting - after a few hours of digging, it looks like IE10 is incorrectly reporting the getBoundingClientRect() values for the documentElement and body. I believe I've figured out a workaround, though, and dropped it into this [uncompressed] version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js

 

Does that work better for you? 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you very much for the few hours of digging! Hugely appreciated, I would never have found this on my own. I created a Codepen with your revised script:

 

See the Pen QmLoaG by artchibald (@artchibald) on CodePen

 

The Codepen works in IE10 now, unfortunately, it didn't fix my website! I am going to try commenting other stuff out to see why. I will update this thread when I find something.

 

Thanks again.

Archie 

Link to comment
Share on other sites

Hi again, I have realised  that if I serve this script locally (copy your version and link it js/ScrollToPluginCustom.js) it doesn't work! So I got my team to host the file on Amazon s3 like you have, and behold the miracle it works! I didn't want to link to your S3 file in case you delete it.

 

Thank you very much for all the help. I am a huge fan of Greensock as you can see in my personal artwork:

 

http://archibaldbutler.com

http://archibaldbutler.com/news/killuminati/

http://archibaldbutler.com/news/african-diamonds/

 

For my next project I want to do a fusion of Wordpress/React and Greensock so no doubt I will be in touch with more questions!

 

Thanks a million for this.

 

Archie

  • Like 2
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...