jQuery css top returns zero in safari

Question

I have a div with position:absolute; inside another div. I have script for making the child div parallax by changing its top position as a user scroll the window. It works great except for safari. The position div has top as percentage. But in the script it is converted into pixels and assigned again. I know there is issue with this as jquery does not return correct pixel values for percentages (as jQuery only returns pixel values). There are lot of workarounds in stackoverflow and other sites like accessing DOM directly or accessing stylesheet values but I want a jQuery solution. Below is the mentioned parallax:

var initScrollPostion = $(window).scrollTop();
var scrollDirection = 0;

$.fn.extend({
  sliderParallax: function(offsetTop) {

    var parallaxElement = $(this).find('.portfolio-description');

    var scrollPosition = parseFloat($(window).scrollTop());
    var currentPositionTop = parseFloat($(this).offset().top);
    var currentHeight = parseFloat($(this).outerHeight());

    if (scrollPosition > currentPositionTop - parseFloat(offsetTop) && scrollPosition - currentPositionTop < currentHeight) {
      var scrollPortion = scrollPosition - currentPositionTop;
    }

    if ($(window).width() > 768) {
      var parallxTop = -1 * scrollPortion * 0.5 + parseFloat(offsetTop) / 2;
    } else {
      var parallxTop = -1 * scrollPortion * 0.2 + currentHeight / 4;
    }

    parallaxElement.css('top', parallxTop + 'px');

  }
});

var offset = $('.portfolio-description').css('top');

$(window).scroll(function() {
  $('.portfolio-content').sliderParallax(offset);
});

img {
  width: 100%;
}
.portfolio-description {
  position: absolute;
  right: 18%;
  top: 63%;
  font-family: havelTall;
  color: #000000;
  text-transform: uppercase;
  text-align: right;
}
.portfolio-description > .port-desc-header {
  font-size: 132px;
  letter-spacing: -4px;
}
.portfolio-description > .port-desc-desc {
  font-size: 54px;
  margin-left: 41px;
  margin-top: -43px;
  letter-spacing: 0.3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 portfolio-content">
  <img src="http://lorempixel.com/output/city-q-c-640-480-3.jpg" alt="" />

  <div class="portfolio-description">
    <div class="port-desc-header">stand-out</div>
    <div class="port-desc-desc">mens fasion website</div>
  </div>
</div>

Is there any method of getting this work on safari with jQuery? Help would be appreciated.

PS: I found that issue is really with var offset = $('.portfolio-description').css('top'); as it returns zero. Any ideas?