#StackBounty: #javascript #html #canvas #scrollbar #p5.js p5.js canvas adds unwanted scrollbar

Bounty: 100

I am creating a simple p5.js canvas using the values from it’s parent like this:

// Canvas properties
var $musicscape = $("#musicscape");

// p5.js functions
function setup() {
    var canvas = createCanvas(
        $musicscape.outerWidth(),
        $musicscape.outerHeight()) ;
    canvas.id("canvas")
    canvas.parent($musicscape[0]);
}

My musicscape element has the following sass properties and takes on the right size without creating any scrollbars.

#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh

Here is a jsfiddle which shows the error.

However, when I add the canvas which has the exact size as my html, body and #musicscape elements, a vertical scrollbar is added. The only way to remove it is to set the canvas width to $musicscape.outerHeight() - 3 which also creates a small white line at the bottom that isn’t part of the canvas. How can I get rid of the vertical scrollbar while keeping the canvas to the size of its parent? I checked and there are no padding or margin anywhere on my page.

I am testing on Chrome btw.


Get this bounty!!!

#StackBounty: #javascript #html #ios #css #mobile flex-wrap: wrap not working on mobile iOS

Bounty: 50

I have this that works fine on my laptop, but not on mobile iOS.

<

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

* {
  /* normalize */
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  background: 0 0;
  min-height: 0;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}

#a {
  display: flex;
  max-width: 100vw;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh)*100);
}

#b {
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  padding: 50px;
}

#c {
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 100%;
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  width: 100%;
  display: flex;
  padding: 10px;
  border: 3px solid red;
  flex-direction: column;
}
  • foo
  • hello
  • world
  • bar
  • food
  • hi
  • morning
  • something
  • beverage
  • snack
  • drink
  • other
  • world
  • bar
  • food
  • hi
  • morning
  • something
  • beverage
  • snack
  • drink
  • other
</div>

However, on mobile it as a few rows, but mostly it overflows to the right. Like it will have 2 or 3 rows but then 15 or 20 items per row (when only 2 or 3 fit on screen). I haven’t been able to get it working since I don’t have a good system to debug on mobile.


Get this bounty!!!