WebApp view on android chrome visual bug

WebApp view on android chrome visual bug

  

Hello all,


I'm currently working on building a webpage with OutSystems, but I stumbled upon a visual problem that I can't get rid of.

On desktop and tablet everything looks fine, but on my mobile (android) in Chrome I get a white box at the bottom of my screen when I scroll down. When I scroll up again, this white box disappears.


This white box doesn't show up when I open the webpage on my android in Firefox, or when I turn my mobile 90 degrees to landscape mode. It also doesn't appear when I use the service studios preview in device.


What I figured out is that when I remove the background, this problem also seems to disappear. The CSS I'm using for the background right now:

SyntaxEditor Code Snippet

body {
    background-image: url(/ProjectName/img/planetred.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Has anyone else had a similar problem to this, or maybe knows a possible fix?


Kind regards,

Dennis

Hi Dennis,

Does the problem also appear when testing in the emulator on Chrome? And what about another Android device with a different resolution?

What I think might be the problem is that since the background image is fixed and no-repeat, it's just too short for the whole page, so at the bottom (where there's still some text to display) it's just finished so you see the background colour.

Kilian Hekhuis wrote:

Hi Dennis,

Does the problem also appear when testing in the emulator on Chrome? And what about another Android device with a different resolution?

What I think might be the problem is that since the background image is fixed and no-repeat, it's just too short for the whole page, so at the bottom (where there's still some text to display) it's just finished so you see the background colour.

This problem doesn't appear in the emulator, other android devices that I tested got the same problem.

I managed to get rid of the white field after scrolling, so right now it only shows up during scrolling when my url bar goes away. When the url bar goes away the website has a bigger height and the background img doesn't adjust till I stop scrolling (when I remove my finger of my screen).


So for now half of my problem is fixed. The most important part is that the white field goes away and that it only shows up during scrolling and disappears after.