radMenu root elements shift position slightly during flyin/flyout animations

[Adam]

I'm using Telerik controls in a legacy application that is forced to run in IE Compatibility Mode.  I'm using version 2015.2.826.40, as my understanding is that later versions don't support Compatibility Mode.

What I've noticed is that with this version, the root nodes on a radMenu are shifting slightly during animation.

I have a small video of the process:

https://youtu.be/lHO2EJO5HqQ

Any ideas on where I should start looking to try to debug or solve this issue?  By the way, changing the browser out of Compatility Mode solves the issue completely... the menu looks great.  But unfortunately that's not an option at this point.

[Marin Bratanov]

Hello Adam,

It looks like the animation container gets a 1px height and/or border while animating and that's what causes the items around it to move a little.

The best I can offer is that you try pausing a debugger in the OnClientItemOpening and OnClientItemOpened events to see if you can inspect the DOM and find which element it is (it is likely that IE will not allow that, unfortunately, and you may need to manually walk through the tree in the DOM explorer and expand nodes to find the one you are looking for, and hope it would have updated the values). Perhaps with this you could then devise a CSS rule that will remove this border or height (or whatever other property it is) without breaking the menu appearance.

You can also try disabling animations to see if this helps.

Here is a basic example that you can use as base for comparison and investigation

<telerik:RadMenu runat="server" ID="rm1" OnClientItemOpened="function(){debugger;}" RenderMode="Classic" Flow="Vertical" Skin="Telerik">
    <ExpandAnimation Type="None" />
    <CollapseAnimation Type="None" />
    <Items>
        <telerik:RadMenuItem Text="first">
            <Items>
                <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="second">
            <Items>
                <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="first">
            <Items>
                <telerik:RadMenuItem Text="one"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="two"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="three"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

Regards,
Marin Bratanov
Progress Telerik

[Adam]

Thanks!  I've found that disabling the Collapse Animation pretty much fixed the issue.  And I can live without the Collapse Animation.

The text still jumps around a little, so I might continue down that path.  

[Marin Bratanov]

It's good to hear this is going well, Adam. I hope this either suffices, or you manage to find an improvement. Actually, I hope you can soon move to standards mode and stop having to support IE7 :)
--Marin

[Adam]

I know!  The point of my upgrading to Telerik controls is to get away from some legacy stuff that is locking us into Compatibility Mode.

Thanks again for your help!