Whenever I test this code on JSFiddle, everything runs smoothly. However, in Safari, it seems to be glitchy. I can't quite figure out what the issue is as the code appears to be pretty standard. The main problem lies in the chat box where the right side extends too far beyond its boundaries.
Here's a screenshot of the problem: https://i.sstatic.net/J6yxw.jpg
<body>
<div class="chat">
<input type="text" class="chat-name" placeholder="Enter your name">
<div class="chat-messages">
<div class="chat-message">
Alex: Hello there
</div>
<div class="chat-message">
Billy: Hello!
</div>
</div>
<textarea placeholder="Type your message"></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</body>
CSS:
body,
textarea,
input {
font: 13px "Trebuchet MS", sans-serif;
}
.chat {
max-width: 300px;
}
.chat-messages,
.chat textarea,
.chat-name {
border: 1px solid #bbb;
}
.chat-messages {
width: 100%;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
chat-message {
margin-bottom: 10px;
}
.chat-name{
width: 100%;
padding: 10px;
border-bottom: 0;
margin: 0;
}
.chat textarea {
width: 100%;
padding: 10px;
margin: 0;
border-top:0;
max-width: 100%;
}
.chat-status{
color: #bbb;
}
.chat textarea,
.chat-name {
outline:none;
}