Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 418
ReWWeR Avatar asked Sep 22 '16 08:09

ReWWeR


People also ask

How do you set the background-attachment property whether a background image is fixed or scrolls with the rest of the page?

Definition and UsageThe background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

How do you fix a fixed background image?

Set a background image using the HTML body elementAdd the bgproperties="fixed" code into the body element, as shown below. Next, add the background="location" attribute to the body tag, where location is the relative or absolute URL of the image. In the above example, background="bg.

How do you use background-attachment?

The background-attachment property is used to specify that the background image is fixed or scroll with the rest of the page in the browser window. This property has three values scroll, fixed, and local.


1 Answers

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

like image 73
Viira Avatar answered Sep 20 '22 06:09

Viira