title: While focus the element, page not get scrolled in firefox and IE?
body: <p>I have tried to focus the element in my page using focus method. When the element is focusing, page scrolled automatically in to the focused element. But In firefox and IE browsers page not scrolled properly. So my focused element visible in bottom of the page.</p>
  
  <p>Steps:
  Run the sample in chrome, element will be appear in middle of the page.
  In Firefox it will appear in bottom of the page.</p>
  
  <p>How to resolve it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(() =&gt; {
    document.getElementById('parent-element').focus();
  }, 10);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    touch-action: none;
  }
  
  #target {
    height: 2000px;
    background-color: aliceblue;
  }
  
  #parent-element {
    max-height: 980px;
    width: 400px;
    left: 150px;
    top: 958px;
    display: inline-flex;
    background-color: #fff;
    box-shadow: 0 12px 40px 5px rgba(0, 0, 0, 0.26);
    max-width: 100%;
    min-width: 240px;
    height: auto;
    position: absolute;
  }
  
  .Child-element {
    border-bottom: none;
    padding: 18px;
    border-radius: 1px 1px 0 0;
    line-height: 30px;
    background-color: #fff;
  }
  
  .childcontent {
    display: block;
    width: 83%;
    color: rgba(0, 0, 0, 0.87);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="target"&gt;
    &lt;div id="parent-element" role="dialog" tabindex="-1"&gt;
      &lt;div class="Child-element"&gt;
        &lt;div class="childcontent"&gt;Am developer&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>