Webpage slides around in mobile browser

Report · Jul 19, 2019

Hi. I've made my first P5 webpage but it slides around a lot. It's a big problem on the Chrome mobile browser because dragging down causes the page to refresh. I've tried researching ways to prevent it from sliding around and I've included all possible solutions in my css file, it helped horizontally, but nothing seems to prevent it from sliding vertically.I've pasted the relevant code below. Any ideas?

P5.js code:

```

let img;
let song;
function windowResized() 
{
  resizeCanvas(windowWidth, windowHeight);
}
function preload()
{
song = loadSound('assets/sound.m4a');
}
function setup() 
{
createCanvas(windowWidth, windowHeight);
imageMode(CENTER);
img =  loadImage('assets/image.png');
song = loadSound('assets/sound.m4a');
frameRate(12);
}
function mousePressed() 
  {
  getAudioContext().resume() 
  song.play();
  }
  
function mouseMoved() 
  {
  song.play();
  }
  
function touchStarted() 
  {
  getAudioContext().resume() 
  song.play();
  }
  
function touchMoved() 
  {
  song.play();
  }
  
  
function draw() 
{
  var mX=mouseX
  var mY=mouseY
image(img, mX, mY, img.width / 2,     
  img.height / 2);
    
}

```

CSS:

```

@charset "UTF-8";

/* CSS Document */
html, body, text {
width:auto; 
height:auto;
max-width:auto;
width: auto!important; overflow-x: hidden!important; 
-moz-overflow-x: hidden; 
-webkit-overflow-x: hidden; 
-ms-overflow-x: hidden; 
-o-overflow-x: hidden;
height: auto!important; overflow-y: hidden!important; 
-moz-overflow-y: hidden; 
-webkit-overflow-y: hidden; 
-ms-overflow-y: hidden; 
-o-overflow-y: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

```

HTML:

```

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    
<link href="style.css" rel="stylesheet" type="text/css">
<style> </style>
<script src="../scripts/p5.js"></script>
<script src="../scripts/p5.dom.js"></script>
<script src="../scripts/p5.sound.js"></script>
<script src="sketch.js"></script>
    
</head>
  
<body>
</body>
  
</html>

```

Report · Jul 19, 2019

I don't see anything wrong with the code that you have shown, which means that there re are factors that are causing the problem. Does P5 have their on forum that you can turn to?

Wappler, the only real Dreamweaver alternative.

Report · Jul 19, 2019

Thanks, yes but they can be slow to respond. So you're saying it's all right to have the CSS with all that code? I just put it all in to be safe.

Report · Jul 19, 2019

Also, I don’t know if this means anything, but the dreamweaver preview shows the outline of the body as extending off the page even when I set the canvas size to windowHeight-10.

Report · Jul 19, 2019

Try removing -webkit-overflow-scrolling: touch;, it seems that it may not work in some instances. See here for more details:-webkit-overflow-scrolling - CSS: Cascading Style Sheets | MDN

Wappler, the only real Dreamweaver alternative.

Report · Jul 19, 2019

Ok thanks here's what I figured out. There are different requirements for preventing a webpage from sliding around and showing scrollbars on a mobile browser vs doing the same on a desktop browser.

To prevent a page from sliding around on iOS safari you need this css code:

body, text
{
margin: 0;
padding: 0;
}

to prevent scroll bars from appearing on a desktop browser you need this .js code:

function setup()
{
var cnv = createCanvas(windowWidth, windowHeight);
cnv.style('display', 'block');
}

This was partially discovered at this github page:

https://github.com/processing/p5.js/issues/2619

but mostly figured out through trial and error.

I don't understand why the text css needs to be set (since I have no text and nothing in the body) but I know the text tag behaves in funny ways sometimes right? This is the kind of stuff that keeps me from learning coding...

Adobe Community

Webpage slides around in mobile browser

1 Correct answer