Extra lines observed in picklist in IE11 when scrolling down

[Rchu]

Hi,

We observe an issue that there are extra lines shown in the dropdown list when scroll down by mouse's scroll button in IE11 with SmartClient_v83p_2015-05-05_PowerEdition. With SmartClient_v91p_2015-02-17_PowerEdition, the extra lines show at the beginning and then disappear but if we keep scrolling, we can see the extra lines clearly.

Please check the following standalone to reproduce the issue and also the attachment for the screenshot.

Steps to reproduce:
1. Click the "Show Select Field" button to show the select field in pop up.
2. Click to show the picklist.
3. Scroll down using the scroll(mid) button of the mouse.
With SmartClient_v83p_2015-05-05_PowerEdition, the extra dot-line appears near the bottom of the picklist after each scrolling down and doesn't disappear.
With SmartClient_v91p_2015-02-17_PowerEdition, the extran dot-line appears and then disappear near the bottome of the picklist after each scrolling down. However, if we keep scrolling down, we can clearly see the extra lines.

Thanks,
Robin

var provData = new Array();
for (var i = 0; i<2000; i++) {
var value = "DEFAULT";

if (i%13 == 0)
 value = "EXPAND THE STRING TO A LONG ONE TO SEE"; 
else if (i%11 == 0)
 value = "EXPAND THE STRING TO HELLOW WORLD "; 
else if (i%7 == 0)
 value = "EXPAND THE STRING TO BBB";
else if (i%5 == 0)
 value = "YELLOW STRAWBERRY";
else if (i%3 == 0)
 value = "GREEN APPLE";
else if (i%2 == 0)
 value = "RED PIE" ;

provData[i] = i+ " AAA " + value;
};



isc.DataSource.create({
    ID:"provDS",
    clientOnly:true,
    testData:provData,
    fields:[
        {name:"pk", type:"text", primaryKey:"true"},
        {name:"fullName", type:"text"}
    ]
});	


isc.IButton.create({
top: 100,
left: 100,
width: 150,
title: "Show Select Field",
click: function() {
modalWindow.show();
}
});

isc.Window.create({
    width: 400,
	height: 400,
    ID: "modalWindow",
    title: "Modal Window",
	keepInParentRect: true,
	showHeaderIcon: false,
	showCloseButton: true,
	showMinimizeButton: true,
	canDragResize: true,
	showBody: true,
    autoCenter: true,
    autoSize:true,
    autoDraw: false,
    items: [isc.DynamicForm.create({autoDraw: false, ID:"form1",name:"GridLayout", width:400,height:400,selectOnFocus:true,numCols:1,colWidths:["100"],titleOrientation:"top",margin:0,fields:
[{title:"Select Field",width:"*",colSpan:"1",vAlign:"bottom", valueMap: provData, ID:"nRef_SF",name:"nRef_SF",allowEmptyValue:true,fastCellUpdates:false,width: 200, _constructor:"SelectItem"}]})]
	});

[Isomorphic]

This is a native rendering bug in IE. The extra lines are a failure by IE to clean up parts of the native focus outline. It only happens on certain machines with certain patches applied and/or certain hardware and/or certain DOM arrangements.

The only known workaround at the moment is to disable the focus outline entirely, which has drawbacks - covered here.