Laravel 5.x HTML прокрутка проверки формы в неправильное положение

Question

Context

Привет, у меня есть форма HTML с API проверки формы HTML5 и Vanilla JS для запуска проверки формы при нажатии кнопки. Форма не имеет действия и имеет прикрепленный атрибут novalidate.

При нажатии кнопки для отправки формы запускается функция JavaScript, вычисляется, где находятся все входные данные :invalid, а затем прокручивает пользователя до этой позиции с помощью другой функции, которая вычисляет смещение элемента относительно страницы.

Проблема

При попытке отправить форму, если поле :invalid идентифицировано, положение элемента найдено, и с помощью window.scrollTo() мы можем перевести пользователя на top этого элемента (делается небольшой вычет для учета других элементов на странице и надписей )

Однако в моих тестовых примерах в Laravel кажется, что пользователь прокручивает только верхнюю часть страницы, а не элемент

Странно то, что он отлично работает в другом фреймворке и внутри сокращенного тестового примера, например: файл stati c HTML, просматриваемый на веб-странице.

Не могу понять почему он не может рассчитать вершину положение элемента в Laravel?

HTML

<form class="needs-validation" novalidatw>
  ...
  <input type="text" class="form-control" maxlength="32" required />
  <button type="button" onclick="validateForm(event)" class="btn btn-primary mt-3">Validate & Submit</button>
</form>

JS

// get the element position
function getOffset (el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN( el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}


// validate the form
function validateForm () {
  var forms = document.getElementsByClassName('needs-validation')
  var validation = Array.prototype.filter.call(forms, function(form) {
    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()

      // get the "first" invalid field
      var errorElements = document.querySelectorAll('.form-control:invalid,.custom-select:invalid,.custom-control-input:invalid')

      // scroll the user to the invalid field
      window.scrollTo(0, getOffset(errorElements[0]).top - 30)

    }
    form.classList.add('was-validated')
  })
}

Буду признателен за любые мысли, предложения или что-либо еще Я пробовал в нескольких Laravel проектах, это Laravel специфицированная c вещь с точки зрения того, как лезвие компилируется HTML?

Вот ссылка на репродукцию / площадка для эксперимента -> https://codepen.io/sts-ryan-holton/pen/QWbaZgp