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,805
3
16
39

Sadly that bug report was seen as invalid as browser handle `background-attachment: fixed` as `background-attachment: scroll` _on purpose_ during transforms. Is there a way one could replace `background-attachment: fixed` to make it look right during transforms? – Ray Nov 03 '22 at 11:58

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

886
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 0 · Answer 3 · answered Jul 24 '22 at 07:27

0

According to MDN docs when it comes to animations most background properties are discrete. Except for the background-size and background-position properties.

answered Jul 24 '22 at 07:27

Onyela Udochukwuka

11
5

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/32320553) – Aaron Meese Jul 28 '22 at 00:10
1

That's true I'll take not of that – Onyela Udochukwuka Aug 02 '22 at 15:40
The fact that properties are discrete for animations has nothing to do with this issue in my opinion. Or maybe I don't get your answer. – Jasper Habicht Oct 25 '22 at 21:42

score -3 · Answer 4 · 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

4 Answers4

Linked