# Webpage slides around in mobile browser

**URL:** <https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832>\
**Category:** Libraries\
**Created:** [July 20, 2019, 12:04am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832 "2019-07-20T00:04:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 20, 2019, 12:04am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/1 "2019-07-20T00:04:20Z")

</div>

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

```auto
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

```auto
@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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [July 20, 2019, 12:54am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/2 "2019-07-20T00:54:12Z")

</div>

Ive struggled with something similar. Look into the different widths/heights you can use, because with p5.js, windowHeight (IIRC) doesn’t take into account the url-bar. I don’t remember if there’s an alternate height you could ref, but worst case you might have to cut off the top of the sketch by a harcoded amount.

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 20, 2019, 1:55am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/3 "2019-07-20T01:55:25Z")

</div>

I see displayHeight but I assume that takes into account the whole display. It seems weird that windowHeight would take into account the url bar that seems like a bug if true. Other scripts don’t seem to do that (I’m just learning to code though). But at the very least it seems like there should be an option to limit it. I tried setting it to windowHeight-10 but that didn’t help.

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 20, 2019, 4:14am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/5 "2019-07-20T04:14:23Z")

</div>

Ok 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:

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

```

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

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

```

Also this keeps the page from moving with your finger:

```auto
function touchMoved() {
  // do some stuff
  return false;
}

```

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…

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [July 20, 2019, 5:11am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/6 "2019-07-20T05:11:18Z")

</div>

Glad you figured it out! Also, part of what makes coding so great is that, more often than not (and especially as a beginner) people have run into (and solved) the same problems you have faced. And more importantly, those answers usually live on some website (ie stackoverflow)

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 21, 2019, 3:05am UTC](https://discourse.processing.org/t/webpage-slides-around-in-mobile-browser/12832/7 "2019-07-21T03:05:58Z")

</div>

Yeah it’s the active P5 community is the main thing that convinced me to give coding another shot. (Stackoverflow is helpful but they always assume a level of knowledge or don’t respond at all which is frustrating when just starting out.)