Highlighted

Webpage slides around in mobile browser

Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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>

```

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

Views

258

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Webpage slides around in mobile browser

Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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>

```

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

Views

259

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 19, 2019 0
Adobe Community Professional ,
Jul 19, 2019

Copy link to clipboard

Copied

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?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0
Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0
Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0
Adobe Community Professional ,
Jul 19, 2019

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0
Participant ,
Jul 19, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0