Chrome vs Firefox vs IE - Scrolling Issue

Question

I am developing a site and it seems to behave differently when in Chrome. Scrolling is not consistent or smooth. It keeps on stopping. However, when I load the same site in Firefox or IE9, I have no problems. Everything scrolls smoothly.

++++++++EDIT++++++++ I was able to fix my problem by adding the following meta tag to my template:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

I am not sure why, but it seems to fix it... as well as other problems I was having

score 1 · Accepted Answer · edited May 23 '17 at 11:58

This is a known problem in Chrome and the solution is not logically clear to me.Something to do with how chrome is rendering the javascript. However, on adding a parent container div to the scrolling content it seems to work fine. There is a solution to this problem in javascript in the following link with an example

Stackoverflow solution

For the link you have added to your web page it is more to do with IE than chrome. Do you have chrome frame installed in IE ?

I do not know the technology you are using but the below code will give a hint to the solution.In Gwt (Google web toolkit) I worked out the solution as follows:

My earlier code which was causing the issue was as follows

Old Code:

        <g:FocusPanel addStyleNames="{style.scrollable} {style.fullHeight}" ui:field="bodyContainer">
        <b:CellTable width="100%" ui:field="bodyTable"/>
        </g:FocusPanel>

New Code: CSS :

     #scrollContainer {
       overflow:auto;
       position:absolute;
       top:0px; height:100%; width:100%;
     }

 HTML:
    <div id="scrollContainer">
    <g:FocusPanel ui:field="bodyContainer">
        <b:CellTable width="100%" ui:field="bodyTable"/>
    </g:FocusPanel>
    </div>

Hope this helps!

Chrome vs Firefox vs IE - Scrolling Issue

1 Answers1