Jump to content
Search Community

Draggable initialization causes scrollbars to appear in IE11

loueradun test
Moderator Tag

Go to solution Solved by Jonathan,

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

Thanks for the help everyone.

 

After some fiddling, it became evident that applying -ms-overflow-style: none to the body or html completely eliminated all the scrollbars in IE.  But armed with this knowledge, I was able to make a change to the script that gets it working in IE without any issues:

// in some browsers (like certain flavors of Android), the getScreenCTM() matrix is contaminated by the scroll position. We can run some logic here to detect that condition, but we ended up not needing this because we found another workaround using getBoundingClientRect().
div.style.cssText = "width:100px;height:100px;overflow:scroll";
parent.style.setAttribute('-ms-overflow-style', 'none');
parent.appendChild(div);
div.appendChild(svg);
point = svg.createSVGPoint().matrixTransform(svg.getScreenCTM());
e1 = point.y;
div.scrollTop = 100;
point.x = point.y = 0;
point = point.matrixTransform(svg.getScreenCTM());
_svgScrollOffset = (e1 - point.y < 100.1) ? 0 : e1 - point.y - 150;
div.removeChild(svg);
parent.removeChild(div);
parent.style.setAttribute('-ms-overflow-style', '');

I am marking the answer solved, but it would likely be good to have something like this included for those who want the page to have scrollbars in IE.  Perhaps with some conditional logic to apply this css change only if its IE.

Link to comment
Share on other sites

loueradun,

 

You could do this instead:

 

See the Pen vNQePJ by jonathan (@jonathan) on CodePen


 

// check if IE8 and above
var docMode = document.documentMode,
    hasDocumentMode = (docMode !== undefined);

// browser is IE - only IE8 and above support documentMode
if(hasDocumentMode) {
     // use document.documentElement to apply styles to the html tag
     // apply -ms-overflow-style none on html tag before onload
     document.documentElement.style.setAttribute('-ms-overflow-style', 'none');
     // wait until window is loaded 
     window.onload = function(){
         // then remove -ms-overflow-style css property on the html tag
         document.documentElement.style.setAttribute('-ms-overflow-style', '');
     };
}

See if that helps.. i tested and it on Windows 7 (64-bit) IE11 and it works ;)

 

Also check out my StackOverflow answer on Best way to check for IE using Javascript:

 

http://stackoverflow.com/questions/7690676/javascript-the-best-way-to-detect-ie/20201467#20201467

 

:)

  • Like 3
Link to comment
Share on other sites

In my example without the -ms-overflow-style fix.. it appears as a 100px by 100px square with scrollbars horizontal and vertical, background being transparent.. and below the #wrapper div within the body tag.. in IE11 it will like flash appear for like 2 seconds and disappear (when the #wrapper height is 250px just so you can see it appear/disappear below the #wrapper div)

Link to comment
Share on other sites

Either doing that like a fade in of your content after window load.

 

Or just doing like I did above by checking if browser is IE, and then if is IE, add -ms-overflow-style on the html tag, and then when the window load event fires, remove the CSS -ms-overflow-style property. Either of those would work.

Link to comment
Share on other sites

One last question. Does this problem exist loading TweenMax or reordering the dependencies? No one ever responded to that. I don't see why that div would be rendered in first place unless the initialization was being deferred or delayed because of this. 

GSAP encountered missing dependency: com.greensock.plugins.CSSPlugin

Did nobody look at the console? Draggable depends on the CSSPlugin, so order probably matters here.

Link to comment
Share on other sites

I don't want to bombard you guys with 30 likes for each comment in this thread, but I remain in awe at how vigorously you both investigate these issues. 

Jonathan, I'm amazed at the capacity of your brain to be able to reference every IE (and FireFox) flaw against the official spec. Amazing. I'm glad you guys still leave some easy posts for me to help with :)

  • Like 4
Link to comment
Share on other sites

Thanks Carl, that's just the Ginkgo Biloba :D

 

Blake, when I tested locally I tested with both TweenLite and CSSPlugin and with TweenMax, since I was thinking the same thing when I did my first reply. I will test again tomorrow locally and see if I see that in the console with TweenLite and CSSPlugin. Testing locally is better anyway since codepen was choking in IE11 when it was creating 1000 divs, making it very difficult to debug. I will post again tomorrow if I see that warning in the console locally. Thanks for all the help, IE can put you through the ringer :)

  • Like 1
Link to comment
Share on other sites

I don't want to bombard you guys with 30 likes for each comment in this thread, but I remain in awe at how vigorously you both investigate these issues. 

Jonathan, I'm amazed at the capacity of your brain to be able to reference every IE (and FireFox) flaw against the official spec. 

+1. 

 

It's threads like these that are a great read - seeing the thought process and the path to the solution rather than just posting the answer in a CodePen. As always - a great education. :)

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