background-attachment fixed with transform not working in Firefox

Question

CSS value transform turn off background-attachment: fixed in Firefox.

Here is the example

div {
   transform: translate3d(0,0,0); // if remove starts to work
   width: 100%;
   height: 2000px;
   background-image: url('http://www.wallpapereast.com/static/images/001_Fish-Wallpaper-HD_hkNsK33.jpg');
   background-size: cover;
   background-attachment: fixed;
}

<div></div>

if you remove transform from CSS it starts to work. Reproducible only in FF.

not sure why a bounty, this is a known bug https://bugzilla.mozilla.org/show_bug.cgi?id=1304985 — Temani Afif, Aug 10 '18 at 08:36
according to firefox this is intentional due to https://www.w3.org/Bugs/Public/show_bug.cgi?id=17521. I have explained the reason of why a bounty that is I need a workaround. @TemaniAfif — Abdul Rab Memon, Aug 10 '18 at 11:45
@AbdulRabMemon you won't find a generic workaround for that since it's a bug, it will depend on each sitatuion, I have faced this bug a lot of time and each time I find a way to avoid it and make it working on FF ... So if you have a particular case share it and we will find solution for it but don't expect a magic workaround — Temani Afif, Aug 10 '18 at 11:52
In My particular case there is a swiper(react-id-swiper) this swiper uses transform and in that swiper is this exact same site http://www.philanthropyage.org/coming-of-age-2018/. — Abdul Rab Memon, Aug 10 '18 at 11:55
@AbdulRabMemon what swiper? I don't see any issue with the website, it works the same in FF and Chrome — Temani Afif, Aug 10 '18 at 12:04
I'm trying to put it in a swiper and other articles all articles will be swipeable. — Abdul Rab Memon, Aug 10 '18 at 12:06

score 6 · Answer 1 · answered Aug 09 '18 at 13:11

6

background-attachment:fixed; doesn't work when any 'transform' is applied

and that's a bug in firefox and it is not yet fixed.

Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=1292499

answered Aug 09 '18 at 13:11

Viira

3,587
2
15
35

score 1 · Answer 2 · answered Aug 25 '18 at 18:28

1

It was a common problem 2 years ago, but as far as I know, it has been solved a while ago, and now the background-attachment CSS Property is now fully supported by all browsers, according to MDN.

answered Aug 25 '18 at 18:28

Elharony

825
8
18

Although `fixed` isn't supported by iOS Safari and Samsung Internet yet: [Can I Use](https://caniuse.com/#feat=background-attachment). – Gust van de Wal Aug 28 '18 at 17:13

score -3 · Answer 3 · edited May 23 '17 at 11:54

-3

This has been solved in this question.

Long story short- use position instead of background-attachment.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 28 '17 at 10:51

Libi

53
3

This has not been solved in that question, that question provides solution to another problem. – Abdul Rab Memon Aug 09 '18 at 12:18
1

@AbdulRabMemon why adding a bounty to a known bug? – Temani Afif Aug 10 '18 at 08:40

background-attachment fixed with transform not working in Firefox

3 Answers3

Linked