loueradun
loueradun's Achievements
1
Reputation
-
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.
-
Hi Jonathan, Thanks for the reply. I guess I was writing mine as it came through. I can verify that adding the -ms-overflow-style: none to the html element definitely resolves the issue. I will need to take some time to make sure there aren't any side effects to applying this to the html. I may be able to just add that style to the appending div in that line of code posted earlier if there are other issues caused by adding it to the root html element (perhaps the plugin should do this as well so the issues doesn't come up again in the future). Thanks for everyone's help on this.
-
The part I was curious was in this comment: // 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(). There are 2 things here, first, this fix was added for android (I would assume ones not using chrome as their default browser). It also states that they ended up not using this because another workaround was identified using getBoundingClientRect(). So basically I have two questions here. 1) Do we know why we are creating this div with overflow:scroll? 2) Are we actively using this workaround in the code? Can we remove the overflow:scroll without any negative effects? I could just go through and test every browser but without knowing what the workaround was trying to fix I don't know what I might be breaking. P.S. Jonathan, Zuriel mangled my name as well
-
Perhaps the operating system information is relevant here. I am using IE11 11.0.9600.17691 on Windows 7 x64 to test.
-
The only solution that I had any luck with was setting the body height to 100% which isn't really workable with the other plugins used on the site. After some further searching, I have found the offending code that is causing the scrollbars to appear: // 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"; If I change that line to contain overflow:hidden, the problem is resolved, however I don't know if that will cause any side affects with the plugin.
-
I was trying to make it as simple as possible to easily see the bug... By giving the divs width/height you effectively push the problem to the bottom of the page out of view. Please try this fork of your codepen and you will see that the problem still exists. http://codepen.io/anon/pen/mezdKY
-
I wish it were that easy... I have updated the codepen with: * { overflow: hidden; } But I still have the same issue
-
When calling Draggable.Create() on any element on the page, there is a momentary blip of horizontal and vertical scrollbars in IE11 (works fine in IE 9, 10, Chrome, Firefox, Safari). In the codepen I set up a case where 1000 divs have the Draggable applied, but the issue still exists when applied to a single element. I set it up this way so it could be easily demonstratable and the scrollbars would appear for a longer period of time. On a site with a lot of elements and extensive javascript the scrollbars appear long enough for the user to notice. http://codepen.io/anon/pen/gaBYGe
