locked
Rendering glitch when overlaying progress with another div

    Question

  • I just noticed a rendering glitch which occurs when creating a progress which is later occluded by an overlaying div.

    Luckily Microsoft Expression Encoder works on Windows 8, see the screen capture for details: https://dl.dropbox.com/u/60028191/ScreenCapture_21-06-2012%2012.28.28.wmv

    Thursday, June 21, 2012 10:38 AM

Answers

  • Thanks for the repro Marcus!  I am able to repro the behavior, and will file a bug.

    As a workaround you can set the display of the progress element to 'none'

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, June 21, 2012 1:09 PM
    Moderator

All replies

  • Do you have a simple sample showing this issue?

    Jeff Sanders (MSFT)

    Thursday, June 21, 2012 12:38 PM
    Moderator
  • Yes, just managed to reproduce easily.

    HTML:

    <progress style="position: absolute; width: 20%; right: 5px; top: 5px; height:10px;"></progress>
    <div id="foo" style="display: none; position: absolute; width: 100%; top: 0px; height: 20px; padding-bottom: 10px; background-color: lightgrey;">Some text here</div>
    

    JavaScript:

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                WinJS.Promise.timeout(4000).then(function () {
                    document.getElementById('foo').style.display = 'block';
                });
                args.setPromise(WinJS.UI.processAll());
            }
        };
    

    The div will then occlude the progress but the progress will still flicker through occasionally.

    Thursday, June 21, 2012 12:51 PM
  • Thanks for the repro Marcus!  I am able to repro the behavior, and will file a bug.

    As a workaround you can set the display of the progress element to 'none'

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, June 21, 2012 1:09 PM
    Moderator