0

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.

  1. When I scroll the page down or up, a copy of chat-box appears in the screen.
  2. 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.

Chat-box problem

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.

Community
  • 1
  • 1
arshad
  • 895
  • 6
  • 29
  • please use jsfiddle for your code or give me any link to check online your code as whatever chat you are using in iframe that is already having a position ( perhaps) most of them do. so we have to check in deep for the problem. please upload this or fiddle your code. – M K Garwa Jan 28 '15 at 08:37
  • @ManojGarwa: Can't set up a fiddle. I use php and the project is in my local machine. – arshad Jan 28 '15 at 08:59
  • ok no issue just tell me is this chat remote chat i mean some third party tool? if yes than remove your id and classes and put this iframe in html before end tag of body and check this – M K Garwa Jan 28 '15 at 09:38
  • nop.i developed this chat. – arshad Jan 28 '15 at 09:42
  • Hey i just checked your html code in my system and its working perfactly. you just do one thing. check another browser also. or remove iframe first than try your popup is it still doing same behavior or not. or if it is not than problem is in iframe code – M K Garwa Jan 28 '15 at 09:53
  • Only chrome has the problem... – arshad Jan 28 '15 at 10:17
  • It seems its not coding problem but chrome problem. just delete all cookies and history and restart browser. before that remove all temporary files from system and then check it. – M K Garwa Jan 28 '15 at 10:19
  • Possible duplicate of [Chrome rendering issue. Fixed position anchor with UL in body](https://stackoverflow.com/questions/15152470/chrome-rendering-issue-fixed-position-anchor-with-ul-in-body) – Cœur May 20 '18 at 04:52

1 Answers1

0

Hey check your code without iframe src or fake src that should not have your chat included in iframe and then check it. i have checked it IE and Chrome and Firfox. Its working charm in all browsers.

possible reason may be chrome history, cookies or temporary data or chat feature in iframe is taking too much time to load. do not define height of iframe in css as give it in iframe inline property

Your css and html code is good and working fine friend

M K Garwa
  • 483
  • 2
  • 13
  • Removed iframe and checked. Same problems appear again even after clearing cache and everything. Only Chrome has this problem. Version 39.0.2171.95 (64-bit). – arshad Feb 03 '15 at 06:06