title: Strange white rectangle boxes that appear and disappear on website
body: <p>There are strange white rectangle boxes that appear and disappear in a chatroom that I created. They randomly appear at the bottom and right side of the chatroom behind the scroll bars, and I am unsure of the cause. Possibly incorrect CSS of HTML? Inspecting the page does me no justice because the boxes do not show up in my code however they randomly appear whenever they want to.</p>
  <p>My site is currently running locally. And perhaps this is a localhost/glitch phenomenon, and possibly the bug will simply go away when I launch the site. However I don't want to risk that, so can someone shed some light on this issue? I need to know whats causing this. Here is what it looks like:</p>
  <p><a href="https://i.stack.imgur.com/lCJra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lCJra.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/bI32q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bI32q.png" alt="enter image description here" /></a></p>
  <p>Usually, the scroll bar on the right is black/almost translucent. At the bottom, there is absolutely no need to scroll right or left. However like I said the rectangle just appears.</p>
  <p>Should I just change the scroll bar background color? Here is what my HTML looks like:</p>
  <pre><code>                &lt;div id=&quot;chatArea&quot; class=&quot;chatroom&quot;&gt;
                      &lt;div id=box class=&quot;lemoncakeleft&quot;&gt;
                          &lt;div class=&quot;chat&quot; id=&quot;chat&quot;&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;form id=&quot;messageForm&quot;&gt;
                          &lt;div class=&quot;form-group&quot;&gt;
                              &lt;input type=&quot;text&quot; required=&quot;required&quot; placeholder=&quot;Enter your message here&quot; class=&quot;enter-message&quot; id=&quot;message&quot;/&gt;
                          &lt;/div&gt;
                          &lt;input class=&quot;chatbutton&quot; type=&quot;submit&quot; value=&quot;Send&quot;/&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>I doubt the issue has to do with the input, where I type and send a message. So here is the css for the div <code>id=&quot;box&quot;</code></p>
  <pre><code>#box {
  height: 556px;
  width: 313px;
  color: #E8E8E8;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  word-wrap: break-word;
  overflow: scroll;
  overflow-y: auto;
  }
  </code></pre>
  <p>I think it has to do with the <code>overflow</code> properties. Which is disappointing because i need those properties for the chat to function appropriately. Also, when viewing the site on my tablet and cell phone, the rectangles are not there. So what exactly is the issue?</p>
  <p>Any suggestions or advice is appreciated. Thank you in advance.</p>
  <p>-JJ</p>