Hi,

I'm having some problems with scrolling images across the screen and IE (v11) and the 'INPUT' elements.

If I try any of the scrollers that I can find, they all seem to do the same thing.

If you include a INPUT html element on the screen next to the scrolling images, then when you give focus to the INPUT box to type text into it, the text cursor (NOT the mouse cursor) in the box flickers crazily and sporadically, and disappears.

This only seems to happen on IE (latest version 11). Its fine in Chrome & FF.

I've used the scroller from this page as an example, but others I've tried do the same: http://www.dwuser.com/education/cont...mage-scroller/

You can see it happening here:

JSFiddle: http://jsfiddle.net/tFZ8N/4/

I think its something to do with the timer and the .scrollLeft() method.

I've tried to get it to work better in IE, but I just cant, I presume its a 'bug' with IE, but I wounder if anyone has a workaround or any thoughts on it?

Note: If you mouse over the moving images while the INPUT box has focus, this stops them scrolling, and then you can see the text cursor in the INPUT box displays fine. Its only when the scrolling is in effect does it cause a problem.

Thanks,

Rob.

HTML Code:
INPUT box <input type='text'>

<div id="div-scroller-container">
    <ul>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>
        <li><img src="http://www.cassiopeiaart.com/uploads/elements_fire-220x300.jpg" width="150" height="200"></li>                
    </ul>
</div>
Code:
#div-scroller-container {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 100px;
        bottom: 0;
}

#div-scroller-container ul {
        padding: 0;
        margin: 0;
        position: relative;
}

#div-scroller-container li {
        padding-right: 2px;
        margin: 0;
        list-style-type: none;
        position: absolute;
}
Code:
var scroller = $('#div-scroller-container');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
    var $this = $(this);
    $this.css('left', curX);
    curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();

// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed) {
    $controller.stop(true).animate({curSpeed:newSpeed}, 600);
};

// Pause on hover
scroller.hover(function() {
    tweenToNewSpeed(0);
}, function(){
    tweenToNewSpeed(controller.fullSpeed);
});

// Scrolling management; start the automatical scrolling
var doScroll = function() {
    var curX = scroller.scrollLeft();
    var newX = curX + controller.curSpeed;
    if (newX > fullW*2 - viewportW)
        newX -= fullW;
    scroller.scrollLeft(newX);
};

setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);