8

This is the strangest bug I've ever encountered with chrome, unfortunately I cannot show you example images because of legal restrictions but I'll try to explain it as good as possible.

So I'm building this website which has an infinite scroll through viewport-sized sections. In the first section I have a form and an html5 video with position fixed in the background and then simple background images for the followup sections, odd numbered sections with background-attachment: fixed; which gives somewhat of a parallax effect.

Now the very odd thing is: as soon as I have focused one of the form inputs in the first section, all the sections with background-attachment: fixed; lose their background image... it's still in the CSS rule but doesn't get rendered (just white).

I tried several solutions for similar issues like this SO thread or this post. Now the funniest thing with the second one is if I add -webkit-transform or -scale to the sections with fixed bg images, the problem occurs right away without any focusing... I really cannot figure this out.

I hope someone can help me with this issue because it's pretty important to have that parallax like behavior.

Here's a jsfiddle showing the problem anyway, not exactly like on my page but you can see the bug, there the video is shown instead of the image, but on my page I set the video to position absolute after scroll has reached the 2nd section, so it's just white...

Community
  • 1
  • 1
Simon
  • 7,182
  • 2
  • 26
  • 42
  • 4
    Can you create a fiddle with dummy data? – reggaemahn Aug 23 '13 at 13:10
  • Unfortunately it would take too much time to reconstruct my environment on jsfiddle. But I just figured out that it obviously is the html5 video causing `background-attachment: fixed;` to break. – Simon Aug 23 '13 at 13:59
  • And it happens if the video or its wrapper has either position fixed or absolute... – Simon Aug 23 '13 at 14:12
  • i have exact the same problem did you find a solution ? – shox Aug 29 '13 at 14:22
  • Not really @shox, I used a workaround which sets the position to static (with height 0) instead of fixed as soon as you have scrolled the video out of viewport... – Simon Sep 02 '13 at 08:54
  • 1
    I'm having really strange issues with Safari as well. I fixed the problem in Chrome by changing my z-index from -1 to 0. It seems related though, because changing from fixed to relative fixed the issue in both browsers. (But it's of course not a solution) – oskarth Sep 11 '13 at 13:59
  • http://jsfiddle.net/nJZ8s/ ? – Jack Sep 18 '13 at 15:12
  • Hm seems ok @JackWilliams, can you explain what exactly you changed so we don't have to compare the whole code? – Simon Sep 20 '13 at 09:39
  • Oh ok got it, you added `z-index: 1`. The problem with this is that the sections after the one with html5 video should flow over the video, so as soon as you add a zIndex of 2 to the sections the bug appears again... – Simon Sep 20 '13 at 09:43

1 Answers1

0

I too have encountered this problem.

The thing is that background-position will make content fixed at that position based on the browser window.

For parallax effect, try with some plugins

karthipan raj
  • 657
  • 1
  • 8
  • 15