css - GIve css3 rotate to a DIV in Chrome then the background-attachment:fixed creating bug

Question

My background-attachment:fixed is working fine. But when I define CSS3 rotate on that DIV and scroll down then background-attachment:fixed stops working.

Check this http://jsfiddle.net/P3jS4/

Right now I am working on chrome18.

When you remove the rotate css then the background-attachment:fixed works fine.

http://jsfiddle.net/P3jS4/2

Answer 1

This is not a bug.

You're trying to do something the spec hasn't defined yet. It says in the comments:

What do fixed backgrounds do in transforms? They should probably ignore the transform completely, since - even transformed - the object should be acting as "porthole" through which the fixed background can be viewed in its original form.

The issue is that "fixed" means relative to the viewport (browser window), not the parent element. The viewport doesn't rotate and there is only one viewport.

Given the specification hasn't decided what the correct approach is then we don't know what you mean by "not work". If it "works" in other browsers that's because they have made a judgement without waiting for the spec to be updated. You should update your question to reflect the behaviour you want, not whether it "works" or not.

There is no point at this stage to expect a browser fix since you are working outside of the specification. My suggestion is to revise your code so you are following the specification through one of the following methods:

• Using an img rather than a background
• Using canvas or SVG
• Rotating the background in a paint program
• Putting the background on an element behind the rotated element

If none of these can be used, and no other workarounds are available then your answer is that it can't be done.

UPDATE: I just realised the spec I linked has been superceeded by a newer version which clarifies the expected behaviour as:

Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.

Thus an element with a fixed background still acts like a "porthole" into an image that's fixed to the viewport, and transforms on the element affect the porthole, not the background behind it. On the other hand, transforming the root element will still transform everything on the page, rather than everything except for fixed backgrounds.

Assuming that by "not working" you mean the background doesn't rotate then what you are doing won't work in a conforming browser.