1

I have an inline style on element on one of my templates.

- hero_image = article.hero.url(:medium) if article.hero.url

%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}

It works marvelously for me. Except when I go to another link and the use the back button to return the page.

When I use the back button to return the page, the inspector the source is the exactly the same, but no image. When I refresh the page, same code, but the image is there. Seriously weird and annoying.

I've seen reports of this being a bug in Chrome related to background-attachment:fixed; but the work arounds they suggest don't work.

Is there a way to force (via Turbolinks?) this element to refresh?

Dennis Best
  • 3,614
  • 3
  • 20
  • 31

2 Answers2

3

It turns out that the issue is fixed by adding the base url to the url like so:

- hero_image =  base_url + article.hero.url(:medium) if article.hero.url

%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}

(I added a base_url helper thanks to this: https://stackoverflow.com/a/2952576/1291663)

Community
  • 1
  • 1
Dennis Best
  • 3,614
  • 3
  • 20
  • 31
1

I've run into the same problem on my app, trying to display user avatars.

There are (many) bug reports related to this particular situation dating back a couple of years, but the bug is still present as of time of this writing.

The solution I've gone with is to replace the background with an actual img tag, and than use z-index tricks to push it back.

Marko Kacanski
  • 423
  • 9
  • 17