Webpage slides around in mobile browser

p5.js Libraries
1

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

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>
2

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.

3

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.

5

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:

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');
}

Also this keeps the page from moving with your finger:

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

This was partially discovered at this github page:

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…

2 Likes
6

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)

2 Likes
7

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.)

1 Like