ListView items partially disappearing when selecting with mouse after scrolling


  • To trigger the effect I would use the mouse to scroll up and down and click on items in the list view and repeat, after a few tries it produces the effect for me .

    The effect is that some items in the list view will partially vanish (leaving behind only the portion that fell behind the scroll bar) and the still visible items do not react/move to the hidden elements.  The items will reappear if I click a different item in the list view, scroll the list view, try to look at them in the DOM explorer, or sometimes they reappear automatically giving a flicker effect.

    This does not occur when using touch, only when using the mouse.

    The items that disappear are not consistent, it can be anywhere from 1 item to all the items.


    Does anyone know anything about why this occurs?  Strangely I couldn't replicate this on the split application template.   Maybe I am just using list views and templates incorrectly.  Any help is appreciated!


    Here is image, left is normal, right is after scrolling up and down then clicking with mouse.


    Code I used for test:


    <!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
        <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/binding.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
        <script src="/winjs/js/uicollections.js"></script>
        <script src="/winjs/js/wwaapp.js"></script>
        <script src="/winjs/js/res.js"></script>
        <!-- WinWebApp3 references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
        <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
            <div class="optionTemplate"> 
                <div class="optionTemplateInner"></div>
        <div id="content">
            <div class="itemList"
                data-win-options="{layout: {type: WinJS.UI.ListLayout}, selectionMode: 'none' }">


    .itemList .optionTemplate
    .itemList .optionTemplateInner


    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        var options = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
        var itemRenderer;
        WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                // TODO: startup code here
                WinJS.UI.processAll(document).then(function ()
                    itemRenderer = document.querySelector('.itemTemplate');
                    var list = document.querySelector('.itemList');
                    if (list)
                        var lv = WinJS.UI.getControl(list);
                        updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);
        function updateForLayout(lv, layout)
            WinJS.UI.setOptions(lv, {
                dataSource: options,
                itemRenderer: itemRenderer
            lv.layout = new WinJS.UI.ListLayout();

    Tuesday, January 10, 2012 2:04 AM


  • Update: Consumer Preview seems to fix this issue

    • Marked as answer by dserjsm Monday, March 05, 2012 11:29 PM
    • Edited by dserjsm Monday, March 05, 2012 11:29 PM
    Thursday, February 16, 2012 1:30 AM

All replies

  • By the way, I have another question.
    Base on the attached picture, how to discard the white border while user select an item?


    Tuesday, January 10, 2012 5:05 PM
  • Aix, this css will remove the white border when the user selects an item.
    .win-listView .win-item:focus
    • Marked as answer by Bob_Bao Monday, February 06, 2012 2:22 PM
    • Unmarked as answer by dserjsm Thursday, February 16, 2012 1:28 AM
    Tuesday, January 10, 2012 6:47 PM
  • dserjsm,

    It works, many thanks.

    Wednesday, January 11, 2012 1:39 AM
  • Update: Consumer Preview seems to fix this issue

    • Marked as answer by dserjsm Monday, March 05, 2012 11:29 PM
    • Edited by dserjsm Monday, March 05, 2012 11:29 PM
    Thursday, February 16, 2012 1:30 AM
  • I'm having a similar problem with parts of scrolled items disappearing with a horizontal scroll. It doesn't always happen, but often enough... I am using Consumer Preview.
    • Edited by VickyRS Tuesday, May 15, 2012 7:49 PM
    Friday, May 11, 2012 1:48 PM