0

I am trying to implement the following codepen for my website :

https://codepen.io/pizza3/pen/NgXowe

When opened with chrome the background images of the slices are positionned correctly and all the slices stacked on each other will display the entire image.

However when browsing with firefox (version Qunatum 60.0.1 (64-bit)) you can notice that the background images are not positionned the same. Seems to me it has to do with the origin point of the images or something similar but I can't figure what the problem is.

I believe the relevant part of the problem is here : 

.left,
.right {
    position: relative;
    width: 50vw;
    height: 20vh;
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
 }

Is this a firefox bug ?

In other words how can I have the same background image spread accross multiple DIVs ?

How can I solve this ?

Thanks

EDIT

Here a couple screenshots to illustrate the problem:

Chrome : chrome

Firefox : firefox

azpublic
  • 1,404
  • 4
  • 20
  • 42
  • I don't see your issue on Firefox Quantum 60.0.1 OSX. Could you post a screen shot ? – Sébastien Gicquel Jun 04 '18 at 08:45
  • Apart from it being a bit jittery at the edges when the animation is running, I am not able to spot any significant differences in Firefox 60.0.1 (64-bit) on Win 10. – CBroe Jun 04 '18 at 08:46
  • Edited my question qith a couple screenshots so you can see exactly what my problem is – azpublic Jun 04 '18 at 09:15

1 Answers1

2

It looks that, though counter-intuitive, the behavior of Firefox(and Edge) is intended and correct as per spec: the transform property (used by the GSAP library for animation) makes background-attachment: fixed behave as scroll. So I'd suggest removing background-attachment: fixed and replacing it with different background-position values for each slice of the image.

May be this answer would also be relevant: https://stackoverflow.com/a/43067630/2533215

Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
Ilya Streltsyn
  • 13,076
  • 2
  • 37
  • 57
  • Do you suggest calculating the pixel position of the background for each slide and then setting it with javascript ? – azpublic Jun 04 '18 at 09:25
  • No, since all slices have the same height, you can combine percentages with `vh` units to calculate positions with CSS itself, e.g. like in this forked example: https://codepen.io/SelenIT/pen/eKJjQb – Ilya Streltsyn Jun 04 '18 at 10:05