Bug with CSS-Perspective on Element and Smooth Scrolling with JavaScript

I'm having a strange problem.

• I want to build a website which has a perspective set to 1500px.
• It's a one-page website, so I added a smooth scrolling script.

But the problem is, that it doesn't work correctly... If i put off the perspective, everything works fine? What could I do to get it to work?

Here's my code...

.page-container{
    position: relative;
    perspective: 1500px;
    background: $bg-color--first;
    width: 100%;
    height: 100%;
}

And the smooth scrolling

function smoothScroll (duration) {
  $('a[href^="#"]').on('click', function(event) {
      var target = $( $(this).attr('href') );
      if( target.length ) {
        removeHamburger();
        console.log(target.offset().top);
          event.preventDefault();
          $('html, body').animate({
              scrollTop: target.offset().top
          }, duration);
      }
  });
}

My content is inside the page container, which is a sibling of my off-canvas navigation.

EDIT:

It doesn't scroll to the right position... It scrolls, but not to the section with the ID...