locked
Background overlap bug

    Question

  • Hello,

    I am looking for help on what I can only imagine is some strange bug. I have a full screen background with transparent windows in it (to create a nice effect over a textured static background). It eventually repeats in the x direction however the backgrounds clip one another so you can see the end of the last BG through the window of the new BG. The CSS I am applying to the background is here:

    .groupeditemspage .groupeditemslist .win-horizontal.win-viewport .win-surface {
        padding: 90px 115px 90px 45px;
        margin-
        min-width: calc(100% - 160px);
        height: calc(100% - 180px);
        background: URL('../../images/dynamicBG.png') left bottom;
        
    }

    I have attached an image below in case anyone has some ideas?

    The BG image is 2800px wide and 1920px tall so it is quite big (so it doesnt repeat in the Y direction if viewed on a portrait tablet) but even when I scale it down the issue is not resolved.

    Thanks

    Update:

    I have tried on a blank grid template adding the BG and the result is the same, is it possible I cannot give .win-surface a background image?




    • Edited by r.c.byrne Friday, February 28, 2014 1:01 AM
    Thursday, February 27, 2014 10:27 PM

All replies

  • Hi Byrne,

    Take a look at Styling the ListView and its items,

    • win-viewport: styles the viewport. This is where the scrollbar is displayed if it's needed.
    • win-surface: styles the scrollable area of the ListView. When the surface is bigger than the viewport, the viewport displays scrollbars.

    You can always style a win-surface for ListView, a background image will scroll when the user scrolls through items.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, February 28, 2014 9:08 AM
    Moderator
  • Hello, the issue is not adding the image to win-surface. The problem is that when the BG repeats, the images overlap and you can see one through the transparency of the other.

    If you take a look at the image above the vertical line should not be there, it is a visual bug which I cannot figure out how to overcome. 

    I added the same image to a brand new grid app and the issue persists

    Thursday, March 06, 2014 4:17 PM
  • Hi thx for your confirmation.

    Yes, I can reproduce the same thing, the image overlapped. I will consult with our seniors if this is a bug, because I cannot confirm if the issue comes from the CSS.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, March 11, 2014 2:43 AM
    Moderator
  • Thank you very much.

    I have done a lot of work trying to isolate the issue and here is what I found:

    -Issue is most prevalent with images which span larger than the screen width / height

    -The last column of pixels for the image is repeated for a few columns. If your image has transparency you can then see this under the next repeat

    I have made an example to demonstrate. I have made a rather gaudy image below with transparency. It has a 1px thin green line to the far right and starts with a purple square. When make it the background of .win-surface for a new grid app you can clearly see the last 1px green line extending under the next repeat of the image. 



    • Edited by r.c.byrne Wednesday, March 12, 2014 1:08 PM
    Wednesday, March 12, 2014 1:07 PM