html - Why does a child div's box shadow sometimes jump to the parent div? -

i'm trying animate box shadow transition aid of css pseudo-elements :before , :after. in principle, code provided in jsfiddle works fine, except on mousing out of subdiv in lefthand column, box shadow jumps leftparentdiv. behavior occurs whenever window window small enough overflow-y: scroll kicks in. problem seems occur in browsers support box shadows.

i guess i'm missing obvious here, can't figure out what.

body {      background-color: pink;  }  .subdiv {      width: 25vw;      border: 1px solid;  }  .subdiv:after {      content: '';      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      z-index: -1;      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30);      transition: 0.6s ease-in-out;      opacity: 0;  }  .subdiv:hover {      transform: scale(1.1, 1.1);  }  .subdiv:hover:after {      opacity: 1;  }  #leftparentdiv {      position: absolute;      left: 0;      top: 0;      border: 1px solid;      width: 47vw;      padding: 3%;      overflow-y: scroll;    }  #rightparentdiv {      position: absolute;      left: 53vw;      top: 0;      border: 1px solid;      width: 47vw;      padding: 3%;      overflow-y: scroll;  }

<div id="leftparentdiv">      <div class="subdiv">        blabla;      </div>  </div>  <div id="rightparentdiv">      <div class="subdiv">        blabla;      </div>    </div>

jsfiddle

you have transform on .subdiv:hover, none on .subdiv. a box transform establishes containing block. allows pseudo-element (and shadow) painted around .subdiv when mouse on it. when mouse leaves element, pseudo-element (and shadow) jumps .subdiv's parent because .subdiv no longer establishes containing block, pseudo-element sizes according parent element , not originating .subdiv because parent element establish containing block. true when layout first rendered, before cursor ever touches .subdiv (you don't see because pseudo-element invisible).

this behavior occurs when .subdiv's parent has overflow: visible. doesn't occur otherwise. reason because pseudo-element's box shadow overflowing parent element whenever originating .subdiv not :hover. non-visible overflow clips shadow away. isn't apparent because parent element doesn't scroll — , reason that because box shadows don't affect layout.

assuming desired behavior .subdiv 1 casting shadow, have position .subdiv establishes containing block @ times:

body {      background-color: pink;  }  .subdiv {      width: 25vw;      position: relative;      border: 1px solid;  }  .subdiv:after {      content: '';      position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      z-index: -1;      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.30);      transition: 0.6s ease-in-out;      opacity: 0;  }  .subdiv:hover {      transform: scale(1.1, 1.1);  }  .subdiv:hover:after {      opacity: 1;  }  #leftparentdiv {      position: absolute;      left: 0;      top: 0;      border: 1px solid;      width: 47vw;      padding: 3%;      overflow-y: scroll;    }  #rightparentdiv {      position: absolute;      left: 53vw;      top: 0;      border: 1px solid;      width: 47vw;      padding: 3%;      overflow-y: scroll;  }

<div id="leftparentdiv">      <div class="subdiv">        blabla;      </div>  </div>  <div id="rightparentdiv">      <div class="subdiv">        blabla;      </div>    </div>