inline styling with erb works in Safari, but not Chrome

Question

When I inspect the element in Chrome, the code is being generated with the correct URL – but the image does not display until I either refresh the page or change an attribute of the styling from Chrome's inspector panel. This bug does not occur in Safari.

I've found that if I remove turbolinks, it works in both browsers. As a side note, I am also using jquery.turbolinks gem.

<div id='show-hero' style='background: url("<%= @roaster.roaster_image_url %>") no-repeat     center top;'></div>

Any idea would be greatly appreciated.

Answer 1

I've experienced this same behavior when using inline styles to assign background-image in Rails 4 with Turbolinks enabled.

It's hacky, but my current workaround is to assign the background image with a bit of js/jquery at the bottom of the view, and bind it to a page load event (more info on turbolinks and page load events here: https://stackoverflow.com/a/18770589/1769539 )

Here's an example of what your JS might look like:

<script>
  function ready() {
    $("#show-hero").css({
      "background-image":"url(<%= @roaster.roaster_image_url %>)",
      "background-repeat":"no-repeat",
      "background-position":"center top"
    });
  };
  $(document).ready(ready);
  $(document).on('page:load', ready);
</script>