background-attachment fixed with transform not working in Firefox

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.

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

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.

Libi

This has been solved in this question.

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

来源：https://stackoverflow.com/questions/39633745/background-attachment-fixed-with-transform-not-working-in-firefox

标签

css