title: The absolute element change when parent fixed element add border in Chrome(77.0.3865.90)
body: <p>In chrome browser, when a border is added to the parent fixed element, its absolute child element location changes, specifically by the outer border of the parent element, but not in edge and Firefox browsers.</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>document.getElementById('add').addEventListener("click",()=&gt;{
    document.getElementById('fixed').classList.add("border");
   })
   document.getElementById('delete').addEventListener("click",()=&gt;{
    document.getElementById('fixed').classList.remove("border");
   })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .fixed{
    position: fixed;
    width: 400px;
    height: 400px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: red;
   }
   .absolute{
    position: absolute;
    width: 100px;
    height: 30px;
    top: 30px;
    right: 30px;
    background: yellow;
   }
   .border{
    border:8px solid green;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;TSET&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="fixed" id="fixed"&gt;
   &lt;div class="absolute" &gt;&lt;/div&gt;
   &lt;button id="add"&gt;add&lt;/button&gt;
   &lt;button id="delete"&gt;delete&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>