1

I am developing a website with parallax effect. The site is divided in some sections and there is a menu that controls the navigation for the sections. The mouse scroll is disabled.

My problem is that the background images from the sections 2,3,4 and 5 is not displaying when i try to open the site in Google Chrome. This problem starts to occur this week. Before this, the site was normal.

I tested in Firefox and Opera and is normal.

I got this layout how base: http://www.ratatattoo.it/ and the same problem is happening there.

My site is: http://www.tmaki.net.

PS: Sorry, my english is bad.

Ricardo Afonso
  • 119
  • 3
  • Hi Ricardo, please include enough code **here in your question** to reproduce the issue, rather than linking to an external site. Otherwise we won't be able to help you. – TylerH Sep 09 '15 at 14:24
  • Hi Tyler, thanks for you answer. The problem is that i no have idea in which code is the issue, because i am using some external scripts and they are bigger. – Ricardo Afonso Sep 09 '15 at 14:30
  • I was thinking this problem is anything with any chrome update, because the site is normal in the other browsers and was normal in chrome last week. – Ricardo Afonso Sep 09 '15 at 14:33
  • et al It looks like a lot of problems were introduced in the latest version of Chrome http://googlechromereleases.blogspot.com/2015/09/stable-channel-update.html No surprise, really; it's been a trend for several versions now. – TylerH Sep 09 '15 at 14:42

1 Answers1

1

Ricardo I believe I know what your problem is. I've had a similar issue and this can be resolved in a number of ways. The issue revolves around the background-attachment: fixed; property.

This issue has been resolved once before here.

There is also another solution to this. By adding a transition to the background image to effectively move it's position then reset it. Try adding this code to each element using a background image with a fixed position.

-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
Community
  • 1
  • 1
kwh71787
  • 576
  • 1
  • 4
  • 14
  • Hi, thank you very much for your help. It works perfectly. The problem was that th tag section position was fixed, but the class "background" was relative. I changed all the classes "background" to fixed and add your code and worked. Thanks again :D – Ricardo Afonso Sep 09 '15 at 15:55