search

OfficeDev / microsoft-teams-library-js

JavaScript library for use by Microsoft Teams apps
https://docs.microsoft.com/microsoftteams/platform/
Other
432 stars 199 forks source link

Teams Web UI 'jumps' when calling scrollIntoView from an iframe #1295

Open stijndeschuymer opened 2 years ago

stijndeschuymer commented 2 years ago

Hi, I'm not entirely sure where to report this issue. There seems to be an issue with the Teams web version (tested browser: Chrome Version 103.0.5060.134) where the UI starts jumping or shaking.

teams-jumping-ui-issue

Steps to reproduce

1.) Create a custom personal teams app with a manifest loading the following page: 2.) Open the app and click one of the links in the web page, you see the UI starts jumping

<html>
  <head>
    <style>
      body {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        margin: 0;
        color: #fff;
      }
      nav {
        position: absolute;
        top: 0;
        left: 50%;
        width: 400px;
        margin-left: -200px;
        box-sizing: border-box;
        padding: 5px;
        border-radius: 0 0 4px 4px;
        background-color: #000;
        font-size: 20px;
        line-height: 1;
        text-align: center;
      }
      ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .link {
        padding: 10px;
        cursor: pointer;
        color: yellow;
      }
      main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
      }
      section {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 100px;
      }

      #html {
        background-color: #f3671c;
      }
      #css {
        background-color: #0071ba;
      }
      #js {
        background-color: #e7a307;
      }
      #on {
        position: absolute;
        opacity: 0;
      }
      a {
        display: block;
        width: 100px;
        text-decoration: none;
        color: inherit;
      }
    </style>
  </head>

  <body>
    <main>
      <section id="html">HTML</section>
      <section id="css">CSS</section>
      <section id="js">JS</section>
    </main>
    <nav>
      <ul>
        <li class="link" data-block="html">HTML</li>
        <li class="link" data-block="css">CSS</li>
        <li class="link" data-block="js">JS</li>
      </ul>
    </nav>
    <script>
      function handleClickLink(event) {
        const block = event.target.dataset.block;
        console.log(block);
        document
          .getElementById(block)
          .scrollIntoView({ behavior: "smooth", block: "start" });
      }

      document.querySelectorAll(".link").forEach((elem) => {
        elem.addEventListener("click", handleClickLink);
      });
    </script>
  </body>
</html>

Cause

The cause of the issue seems to be a combination of calling scrollIntoView() with options block: start or block: center

element.scrollIntoView({ behavior: smooth, block: 'start' }) // Causes issue
element.scrollIntoView({ behavior: smooth, block: 'center' }) // Causes issue
element.scrollIntoView() // Causes issue
element.scrollIntoView({ behavior: smooth, block: 'end' }) // OK
element.scrollIntoView({ behavior: smooth, block: 'nearest' }) // OK
element.scrollIntoView(false) // OK

This in combination with some code in the Teams app that seems to calculate the iframe container every 100ms

Screenshot 2022-08-04 at 16 14 34
ghost commented 2 years ago

Hi stijndeschuymer! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

ChetanSharma-msft commented 2 years ago

Hello @stijndeschuymer - Thanks for reporting this issue. Are you facing the same issue with Teams Desktop client as well ?

Also, please check if you are facing this issue in Edge browser as well ?

sayali-MSFT commented 2 years ago

@stijndeschuymer -Did you get chance to check with Edge browser?

ghost commented 2 years ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 3 days. It will be closed if no further activity occurs within 3 days of this comment.

stijndeschuymer commented 2 years ago

The issue doesn't happen on the Desktop client, but is reproducible in Chrome, Chromium, Edge (I tested chromium based version on mac) and a single bounce on firefox. (all tested on a mac)

Please not that I adjusted the sample code to say block: "start" (failing) instead of `block: "end" (working ok)

sayali-MSFT commented 2 years ago

@stijndeschuymer - We are able to repro that issue , We have raised bug for the same and concerned team is looking into it. We will inform you once we get any update. Thanks!

Prasad-MSFT commented 2 years ago

@stijndeschuymer - This behavior seems to be controlled by the browser and is part of existing web standards. There doesn't seem to be anything Teams can do to prevent scrollIntoView from causing the jump in the top page.

Please change the way you are using scrollIntoView, use scrollTo, or set scrollTop. Few suggestions here: https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move

stijndeschuymer commented 2 years ago

The issue is not a single 'jump' on the page that is part of web standards. The issue is continuous jumping, caused by a setContainerBounds function called every 100ms. This function is part of the teams code bundle!:

Screenshot 2022-08-04 at 16 14 34
sayali-MSFT commented 2 years ago

@stijndeschuymer -Thank you for your response , We will inform to engineering team and let you know once we get the update.

sayali-MSFT commented 1 year ago

We are checking the status of the fix release with the engineering team. We will let you know once we have any updates on it. Thanks.

sayali-MSFT commented 1 year ago

Sorry for delay in response!! We are actively checking the status of bug with engineering team and let you know the updates, if we have any.

sayali-MSFT commented 1 year ago

hope you are doing well!

I wanted to inform you that we are currently checking the status of the bug with the engineering team. Once we receive any updates, we will promptly inform you.

Thank you!

sayali-MSFT commented 1 week ago

We are pleased to inform you that the bug has been fixed! We have verified the fix in the following versions: • Web Version : The client version is 1415/24102001309. Please verify on your end and confirm if everything is working as expected.

Thank you for your patience!