Issue with IE 11: ScrollNav links inside Drawer cause unwanted horizontal scrolling

[pheebner]

Summary

On Ops Console we're having an issue using a ScrollNav inside a Drawer. This issue only occurs on IE (of course 😠). When I click one of the scroll nav buttons all of the content inside the drawer shifts over to the left, which makes the scroll nav buttons inaccessible. When I open the drawer though, the content inside is realigned correctly. This doesn't seem to happen if the drawer is on the left for some reason.

Mark Hollier and I worked on this for a while but we weren't able to figure out a solution and thought we might be spending too much time on it for our team's purposes. It seems that the javascript scrollIntoView() method is probably the culprit, unfortunately. In IE, it scrolls horizontally as much it can in order to put the scroll target at the edge of the container. Because the drawer is hidden offscreen it creates more width in the container that would normally not be there, which means the drawer container can use that width to "scroll" horizontally to the scroll target even though it really shouldn't. All other browsers we've used seem to handle this gracefully but IE crashes and burns per the norm.

I wonder if, for drawer mode 'overlay', it might work to only set the drawer outside the container just before the animation to slide it in occurs. This way the container width wouldn't be different except when the slide in animation needs to happen. Could be a possible solution?

Slack thread with GIF showing the issue in action.

Here is some HTML I was using as a POC to mess around with this. All the styling is in this file as well since it's just a POC. I tried to use stackblitz for this but couldn't get it to work with IE for some reason.

<hc-drawer-container style="background: white; width: 1500px;">
    <hc-drawer align="right" mode="over" #rightOverDrawer>
        <div style="font-size: 125px; padding: 10px; width: 500px;">BOO lol</div>
    </hc-drawer>
    <div>
        <hc-scroll-nav-content [nav]="ScrollNav">
            <div style="padding: 40px; width: 1000px; height: 500px;">
                <section id="a1" hcScrollTarget>
                    <h1>Care Management Team</h1>
                    <p>
                        Bacon ipsum dolor amet jerky buffalo filet mignon, tenderloin burgdoggen pig sausage shankle
                        pork ribeye chuck beef ribs. Beef ribs sirloin turkey pork belly tail tri-tip. Ground round
                        shankle spare ribs, t-bone cow bresaola alcatra meatball chuck pancetta porchetta venison ham
                        leberkas. Shank prosciutto tenderloin rump, sirloin andouille jowl corned beef pastrami ball tip
                        shankle. Swine landjaeger burgdoggen venison.

                        Landjaeger sausage ham hock short ribs buffalo shank bresaola. Kielbasa flank meatloaf,
                        prosciutto rump frankfurter pork chop. Alcatra landjaeger doner, picanha tri-tip pork chop jowl
                        boudin shoulder bacon short ribs tenderloin beef ribs rump. Fatback tenderloin chicken pork loin
                        ham boudin. Pastrami ball tip burgdoggen biltong, capicola shankle bresaola turducken
                        tenderloin.
                    </p>
                </section>
                <section id="a2" hcScrollTarget>
                    <h1>Providers</h1>
                    <p>
                        Corned beef filet mignon pork belly burgdoggen alcatra chicken fatback. Buffalo bacon sausage
                        shank porchetta flank chicken prosciutto, sirloin kielbasa ham. Andouille turducken frankfurter,
                        cow prosciutto beef ribs ham tongue pig biltong jowl. Chuck sausage kielbasa, filet mignon
                        tri-tip venison chicken tail sirloin burgdoggen spare ribs.

                        Short loin drumstick kevin, bacon meatball beef pork pork loin beef ribs frankfurter. Sirloin
                        alcatra salami, prosciutto landjaeger hamburger spare ribs frankfurter capicola porchetta.
                        Boudin meatball t-bone cupim ham burgdoggen. Cupim alcatra shankle pork belly. Chislic fatback
                        landjaeger, meatloaf beef cow short loin bacon porchetta jowl prosciutto.
                    </p>
                </section>
                <section id="a3" hcScrollTarget>
                    <h1>Active Medications</h1>
                    <p>
                        Short loin drumstick kevin, bacon meatball beef pork pork loin beef ribs frankfurter. Sirloin
                        alcatra salami, prosciutto landjaeger hamburger spare ribs frankfurter capicola porchetta.
                        Boudin meatball t-bone cupim ham burgdoggen. Cupim alcatra shankle pork belly. Chislic fatback
                        landjaeger, meatloaf beef cow short loin bacon porchetta jowl prosciutto.

                        Cow venison frankfurter shank turkey pork pastrami swine bresaola ham buffalo shankle ham hock
                        pork belly. Doner andouille pork chop beef pork belly ribeye beef ribs cow. Swine beef ribs
                        shoulder leberkas ground round. Kevin filet mignon rump beef ribs. Sausage pastrami pork loin
                        sirloin landjaeger. Ham kielbasa ground round fatback brisket.
                    </p>
                </section>
                <section id="a4" hcScrollTarget>
                    <h1>Medical History</h1>
                    <p>
                        Bacon ipsum dolor amet bresaola pork loin pork, shank jowl tongue chuck biltong. Tail venison
                        ground round, kevin jowl pastrami boudin salami tongue short ribs meatloaf hamburger. Tenderloin
                        bacon boudin tail tongue doner. Biltong swine chicken frankfurter, strip steak chuck bacon
                        ribeye turkey ham hock pork chop pastrami porchetta alcatra. Tenderloin leberkas boudin
                        burgdoggen, bacon cow pancetta landjaeger jowl picanha ball tip shoulder venison. Chislic swine
                        landjaeger short loin filet mignon corned beef andouille picanha. Drumstick ham hock beef ribs
                        ribeye prosciutto tenderloin.

                        Flank tenderloin kevin landjaeger short ribs shank bresaola meatball bacon doner. Strip steak
                        short loin ball tip chislic beef, ribeye sausage pork loin chuck. Meatloaf alcatra biltong jowl
                        tri-tip porchetta jerky brisket turducken prosciutto meatball shank pancetta ham pastrami.
                        Sausage spare ribs jerky, meatloaf bresaola turducken cupim sirloin rump brisket venison. Salami
                        tail cupim drumstick, shank pork belly bresaola andouille boudin ball tip. Pork belly andouille
                        pork boudin beef bresaola tail.
                    </p>
                </section>
                <section id="a5" hcScrollTarget>
                    <h1>Contacts</h1>
                    <p>
                        Picanha sausage alcatra ball tip, ham hock short loin tongue frankfurter brisket prosciutto
                        chislic pork chop. Alcatra kevin tenderloin boudin corned beef leberkas pork belly cow short
                        loin filet mignon ground round. Picanha sausage shankle shank pancetta turkey. Turducken strip
                        steak pork loin flank.

                        Venison pork loin beef ribs pancetta. Sirloin fatback meatloaf ribeye swine, tongue pancetta pig
                        pastrami ground round t-bone prosciutto short ribs short loin. Leberkas pancetta bresaola tongue
                        jowl pork loin. Capicola alcatra pork belly, tongue shoulder frankfurter fatback spare ribs rump
                        swine chuck meatball. Turducken strip steak short loin ribeye, flank porchetta alcatra
                        tenderloin kielbasa fatback sausage beef salami.
                    </p>
                </section>
            </div>
        </hc-scroll-nav-content>
        <hc-scroll-nav #ScrollNav style="position: absolute; top: 5px; right: 5px;">
            <ul>
                <li hcScrollLink="a1">Care Management Team</li>
                <li hcScrollLink="a2">Providers</li>
                <li hcScrollLink="a3">Active Medications</li>
                <li hcScrollLink="a4">Medical History</li>
                <li hcScrollLink="a5">Contacts</li>
            </ul>
        </hc-scroll-nav>
    </div>

    <button style="font-size: 90px; width: 100%;" buttonStyle="primary" (click)="rightOverDrawer.toggle()">
        Toggle Drawer
    </button>

</hc-drawer-container>

[andrew-frueh]

Closed by #1272