为什么focus（）破坏了页面的样式？

Question

我在制作一个非常简单的功能时遇到了麻烦。当父div进入视野时，我不想集中精力。我做到了：

脚本

if ($('#question-4').parent().hasClass('in-view')) {
  $('#coupon_firstname').focus();
};

样式

input {
  width:100%;
  background: rgba(255,255,255,.4);
  border:2px solid #3D526C;
  padding:10px;
  border-radius:25px;
  display:block;
  &::placeholder {
    color: $white;
    opacity:.5;
  }
  &:focus, &:active {
    outline:none;
  }
}

它可以工作，但是它将主容器发送到屏幕之外。有谁知道为什么这会在我的div定位中起作用？