Jerky background image on scroll: Webkit and Edge

In this fiddle the background image remains perfectly fixed, but on Webkit browsers and Edge it jerks up and down as one scrolls. Initializing a Google Map on the page srtangely fixes it, though.

by Alexandr Steinberg

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="bg-wrap">
  <div id="bg">
  </div>
  <div id="bg-text">Hello!</div>

CSS

body {
  height: 3000px;
  margin: 0;
}

#bg-wrap {
  position: relative;
  width: 100%;
}

#bg {
  height: 600px;
  width: 100%;
  position: relative;
  background-attachment: scroll;
  background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover!important;
}

#bg-text {
  position: absolute;
  top: 200px;
  left: 47%;
  font-size: 3rem;
  color: #fff;
}

JavaScript

(function(window, document, $) { // Fix for clash between background-size: cover and background-position: fixed
  $(window).scroll(function() {
    var scrolledY = $(window).scrollTop();
    $('#bg').css('background-position', 'left ' + scrolledY + 'px');
  });
}(window, document, window.jQuery));