I have a chat-box div in the bottom right corner of my website. I use jQuery to toggle the height of the chat-box div. There are 2 problems I face now.
- When I scroll the page down or up, a copy of chat-box appears in the screen.
- In between the chat or when typing something in the input box, it appears like the chat-box is stuck. But if I scroll down or up a little I can see what I typed.
HTML
<div id="chat_box">
<div id="chat_box_head">Online Chat</div>
<div id="chat_box_body"><iframe src="http://somewhere/path_to/client_chat" width="98%" ></iframe></div>
</div>
CSS
#chat_box{
position: fixed;
bottom: 0px;
right: 40px;
width: 350px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-radius: 5px 5px 0 0;
box-sizing: border-box;
z-index: 9999;
}
#chat_box_head , #chat_box_body{
width: 350px;
cursor: pointer;
}
#chat_box_head{
background-color: #c00;
color: white;
padding: 10px;
border-radius: 5px 5px 0 0;
}
#chat_box_body{
height: 0;
}
.height{
height: 300px!important;
}
iframe {
height:290px;
border: 0;
}
Solved
Solved the issue using: -webkit-transform: translateZ(0);
to the div #chat_box
.
See Chrome rendering issue. Fixed position anchor with UL in body to know more about it.