'Overflow: hidden breaking Transition

I have a pop out box that needs to slide out using CSS only, with JS only being able to call .focus on the element. I have it working with sliding from the left and top, but the other two directs seem to cause a it to snap to the end of the transition and sometime have a slight shaking for the duration of the transition.

This only happens when the overflow is set to hidden and when the transition is applied. I was able to re create this bug in 3wSchools html editor.

Is this a known issue, is their a way around this, or is this a bug?

function focusDiv(id) {
  console.log("'focusDiv' Fired");
  var element = document.getElementById(id);
  element.focus()

}
body {
  background-color: cyan;
}

.popout {
  background-color: red;
  position: fixed;
  /*All of them works without overflow hidden*/
  overflow: hidden;
}

.content {
  background-color: blue;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: transform .5s linear;
}

.popout.right .content {
  transform: translate(100%, 0%)
}

.popout.left .content {
  /*Works*/
  transform: translate(-100%, 0%)
}

.popout.top .content {
  /*Works*/
  transform: translate(0%, -100%)
}

.popout.bottom .content {
  transform: translate(0%, 100%)
}

.popout:focus-within .content {
  transform: translate(0%, 0%)
}
<html>

<head>

</head>

<body>
  <button onclick="focusDiv('popoutright')">Focus popoutright</button>
  <div class="popout right" style="height: 500px; width: 200px;">
    <div id="popoutright" tabindex="-1" class="content">
      <input />
    </div>
  </div>

  <button onclick="focusDiv('popoutleft')" style="margin-left:111px">Focus popoutleft</button>
  <div class="popout left" style="height: 500px; width: 200px; left: 240px">
    <div id="popoutleft" tabindex="-1" class="content">
      <input />
    </div>
  </div>

  <button onclick="focusDiv('popouttop')" style="margin-left:119px">Focus popouttop</button>
  <div class="popout top" style="height: 500px; width: 200px; left: 480px">
    <div id="popouttop" tabindex="-1" class="content">
      <input />
    </div>
  </div>

  <button onclick="focusDiv('popoutbottom')" style="margin-left:120px">Focus popoutbottom</button>
  <div class="popout bottom" style="height: 500px; width: 200px; left: 720px">
    <div id="popoutbottom" tabindex="-1" class="content">
      <input />
    </div>
  </div>
</body>

</html>
htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions