Question

My website works fine on desktop browsers, but on mobile devices (iOS, Android, etc.) it will reload the background and seemingly refresh the whole page anytime I zoom in or out. I was wondering what might be causing this, but up to this point, I’ve been unable to locate the cause of the problem. It makes mobile browsing very irritating.

http://www.zombiesquirrel.com

All the CSS and JavaScript files should be linked in the source of my page. What could be causing this issue?

Answer 1

I was able to solve the problem. The issue was in the following CSS:

body
{
    background-color:black;
}


div.back3
{

background-image:url("back.png");
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-100%;
padding:0;
height:400%;
width:104%;
} 

div.back2
{

background-image:url("back.png");
background-position:250px 250px;
position:fixed;
z-index:-1;
margin-left:-2%;
margin-top:-28%;
padding:0;
height:400%;
width:104%;
}

div.main
{
position:static;
}

I’m not sure exactly which part of this caused the problem, I’ll do some more digging, but for now I simply used the following to specify that this CSS stylesheet only be used on non-mobile devices:

<link rel='stylesheet' href='/z/styles/main-style.css' media='screen and (min-device-width:770px)'>

The min-device-width property is set to that high a number to make sure the iPad also doesn’t use this stylesheet (though I may run into problems if machines are close to the iPad size, but this stylesheet isn’t super critical to my site’s operation anyway).

Thanks!
EDIT: Special thanks to Andrew Manson for the suggestion of disabling the stylesheet only for mobile devices.