在网站上出现和消失的奇怪的白色矩形框

Question

在我创建的聊天室中出现并消失了奇怪的白色矩形框。它们随机出现在滚动条后面的聊天室的底部和右侧，我不确定原因。可能不正确的HTML CSS？检查页面对我来说没有道理，因为我的代码中没有显示这些框，但是随时他们会随机出现。

我的网站目前正在本地运行。也许这是一个本地主机/故障现象，当我启动网站时，这个bug可能就会消失。但是，我不想冒这个风险，那么有人可以解释这个问题吗？我需要知道导致这种情况的原因。这是它的样子：

通常，右侧的滚动条为黑色/几乎半透明。在底部，绝对不需要向右或向左滚动。但就像我说的那样，矩形就出现了。

我应该只更改滚动条背景颜色吗？这是我的HTML的样子：

                <div id="chatArea" class="chatroom">
                    <div id=box class="lemoncakeleft">
                        <div class="chat" id="chat"></div>
                    </div>
                    <form id="messageForm">
                        <div class="form-group">
                            <input type="text" required="required" placeholder="Enter your message here" class="enter-message" id="message"/>
                        </div>
                        <input class="chatbutton" type="submit" value="Send"/>
                    </form>
                </div>

我怀疑这个问题与输入有关，我键入并发送消息。所以这是div id="box"

的css

#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;
}

我认为这与overflow属性有关。这是令人失望的，因为我需要聊天的这些属性才能正常运行。此外，在平板电脑和手机上查看网站时，矩形不在那里。那究竟是什么问题？

任何建议或意见表示赞赏。提前谢谢。

-JJ