search

andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.17k stars 401 forks source link

IE11 #101

Closed kshipp closed 9 years ago

kshipp commented 9 years ago

This slider seems to work well in non-IE versions, but in IE11, the display is very unpredictable - sometimes it works and sometimes it displays the slider too far wide. See screenshot attached. You can see in the screenshot how crazy it appears. If I refresh the page, it often clears up, but that's not a solution. This page has about 30 sliders on it. Each has a value preset in the "value" parameter of the element. I welcome solutions because I would love to continue to use this slider, but it's only working about half the time the page loads in IE11. If I refresh the page in IE11, it will correct itself and display correctly about 75% of the time. This site also uses the Bootstrap 3.0 CSS framework. Looks and works great in Firefox!

capture selection-20141023-105033-1 The second screenshot shows the correct display. capture selection-20141023-105147-1

andreruffert commented 9 years ago

Heya @kshipp I made a codepen with 30 rangeslider.js instances and there are no problems (also tested IE11.). Can you test this codepen on your machine and tell me if there are some issues pls.

bildschirmfoto 2014-10-23 um 23 43 05

For me it looks like you adjusted the CSS .rangeslider__handle width, height but not the margin etc. that's why the handle is not centered at all. To help you out some codepen etc. would be helpfully.

:v:

kshipp commented 9 years ago

Andre' - thanks for the detailed response. Sorry, I didn't create a codepen initially because the page is full of proprietary code/data/etc, so I'd have to extract a lot of dynamic code to create a simple sample to share publicly. It would simply be a lot of work, unfortunately.

Yes, there could be conflicts or other culprits. As I mentioned in my initial post, this site is using the bootstrap framework. The sliders are inside TD's. Yes, I have tweaked the height & width of the handle because it was insanely large and taking-up too much vertical space when you have 30 of these on a page. :) The bootstrap table is a responsive table, so maybe the slider is trying to resize before the table has (in IE11). I just find it odd that it's ONLY IE11 that's the problem (as always). Firefox works fantastic (as always). I have specifically noticed that if IE11 takes longer to load the page, these slider items become corrupt.

I was hoping to find the culprit without having to extract the dynamic code, make it static, remove the bootstrap dependencies, etc, etc, but I may have to resort to this if I want to continue using this slider. It's unusable in IE11 using it on the page I have it on (as is), but unfortunately there are souls out there that actually use that browser. (ha)

andreruffert commented 9 years ago

Alrighty! Happy coding :v: