Toolbar Judders And Flickers When Using PageTop Mode

[Phil]

Hi

We have our editor (version 2010.1.519.20) configured to use "PageTop" mode.  On pages where there is a lot of text (requiring vertical scrolling to edit content) users are using their mouse wheel to scroll up and down the page.  When this scrolling occurs the toolbar moves up/down the page (as expected) however the movement is far from smooth and the toolbar judders, flickers and disappears/reappears until it gets into the correct position.

A silimar forum post included a video which demonstrates my general scenario but as you can see the browser scrollbar is used (with slow scrolling) instead of mousewheel.  If you scroll using your mousewheel you will see what i mean (the problem gets more noticeable the bigger your toolbar)

Is it possible to make the scrolling smoother and can we in someway influence how the animation occurs ?

Thanks

[Dobromir]

Hi Stephen,

This is expected behavior of the toolbar. The reason for such rendering is because the position of the toolbar is calculated every time when the scroll event is fired on the page.

As a possible workaround for such scenario, you can set the following CSS:

<style type="text/css">
    .reToolbarWindow
    {
        position: fixed !important;
    }
    * html .reToolbarWindow /*IE6 Hack - position:fixed is not favoured by IE6 */
    {
        position: absolute !important;
    }
</style>

Please note that Internet Explorer 6 does not favours position:fixed and the workaround will not work for this browser.

Best wishes,
Dobromir
the Telerik team

[Dobromir]

Hi Stephen,

This is expected behavior of the toolbar. The reason for such rendering is because the position of the toolbar is calculated every time when the scroll event is fired on the page.

As a possible workaround for such scenario, you can set the following CSS:

<style type="text/css">
    .reToolbarWindow
    {
        position: fixed !important;
    }
    * html .reToolbarWindow /*IE6 Hack - position:fixed is not favoured by IE6 */
    {
        position: absolute !important;
    }
</style>

Please note that Internet Explorer 6 does not favours position:fixed and the workaround will not work for this browser.

Best wishes,
Dobromir
the Telerik team