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:fixe

Answer 1

I have a working solution that can use both fixed alongside transform rotate.

This info takes into consideration that they can't work together, but let's make them work separate.

Once you have some real content under the image, then will will prevent the bottom right corner of that image from touching the bottom right corner of the browsers viewport, which is the last valid location for using the fixed value. Because after that it's land of void.

Here's the fiddle!

This updated fiddle shows the rotate going the opposite direction.

Per our discussion on your exact requirements, I now have what your looking for. This method is a complete re-write and uses a mask effect combined with the rotate to allow the internal image to remain un-rotated... but that too can have it's own rotate!

Here's the NEW Fiddle with lots of comments that explains the CSS.

Status Update: None of my answers are correct because I did not realize the OP's complete requirements. Currently, the use of rotate with a fixed image is a non-standards method which was previously discussed above via link info. Perhaps a jQuery Parallax method is appropriate for this unique and challenging requirement.

Answer 2

Change background property to content property

.pic{
    background:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
    height:300px;
    -webkit-transform: rotate(-10deg);
    border:1px solid green;
}

to

.pic{
    content:url(http://cssglobe.com/lab/angled/img.jpg) fixed 0 0;
    height:300px;
    -webkit-transform: rotate(-10deg);
    border:1px solid green;
}​

Answer 3

I think that what you need to do is remove the background: ...fixed 0 0; property to get the image to rotate properly while not losing it when you scroll. The fiddle for that would be this; otherwise you could just make a rectangular image with a rotated rectangle inside of it which is transparent. This would be the image hack for the css that you're trying to accomplish.

Answer 4

New Answer for Recent Developments: July 4, 2012

---

I have a jsFiddle work-in-progress that I would like to share with you and release early.

It should give you ideas on how to accomplish this particular style.

Particularly, it has a Parallax effect to it.

Note in unfinished Demo the image can be set in the div differently (it's set fixed and repeated), use CSS3 contain or cover for example for different Parallax effect for the content it's displaying.

It's not limited to images and any static content can be used instead since this object is never rotated/counter rotated which does not cause browser CPU hit.

jsFiddle Screenshot (it was captured zoomed out):
Mask is intentionally shown in the image below, it should match the background color. For select browsers, you can use CSS3 border-image property instead of colored mask (since yellow mask is actually border!).

---

Example 1:
Here's a jsFiddle with the mask, opacities, and extra padding adjusted (to somewhat view as intended.).

---

Example 2:
Here's a jsFiddle as above with content shown with CSS3 cover method to illustrate punch-out effect for whole webpage.

---

I need to get back to this project soon. In the mean time, please feel free to use this early work however you wish. Cheers!

Answer 5

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.