5

here is my site https://charles-keally.myshopify.com/ Its been a whole day fixing the parallax image. The last image show parallax in chrome but not in mozilla. Please somebody help me. I'm using debut theme. All I did is just add background-attachment:fixed; in hero.liquid Anyone please help me Thanks

yousaf
  • 55
  • 1
  • 8

2 Answers2

6

If you disable this on the .page-container class:

-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

It should be better.

Nick Van Loocke
  • 488
  • 2
  • 12
  • you are awsome. You made my day. Thanks Nick – yousaf Jul 06 '18 at 18:15
  • While this may work, it doesn't help those who need the transforms. Any suggestions? – Studocwho Jun 17 '19 at 20:36
  • @Studocwho in this case translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x, y and z axis. It's only a technique to force the hardware acceleration. For more information about this you can read it on https://stackoverflow.com/questions/18529381/what-does-webkit-transform-translate3d0-0-0-exactly-do-apply-to-body. If you have an example in which case you need the transforms please let know. I would gladly help. – Nick Van Loocke Feb 04 '20 at 14:17
1

There have been bugs in the past with transformations in Firefox. After some quick searching, it looks like on your .page-container class contains some transformations that when disabled appear to solve your problem.

.page-container {
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
deversEatsALot
  • 39
  • 1
  • 7