GIVE css3旋转到DIV在Chrome然后background-attachment：修复创建错误 [英] GIve css3 rotate to a DIV in Chrome then the background-attachment:fixed creating bug

问题描述

我的 background-attachment：fixed 工作正常。但是当我在DIV上定义 CSS3 rotate 并向下滚动时， background-attachment：fixed 会停止工作。

请检查此 http://jsfiddle.net/P3jS4/

现在我正在使用 chrome18 。

当你移除rotate css时，附件：固定工程罚款。

http://jsfiddle.net/P3jS4/2

解决方案

这不是一个错误。

您正在尝试规范尚未定义。它在评论中说：

固定背景在变换中有什么作用？他们应该可能
完全忽略变换，因为 - 甚至变换 - 对象
应该作为舷窗，固定的背景可以通过它
以其原始形式查看。

问题是fixed是指相对于视口（浏览器窗口），而不是父元素。视口不旋转，只有一个视口。

由于规范没有决定正确的方法，那么我们不知道你的意思不行。如果它在其他浏览器中的工作，因为他们做出了判断，而不等待规范更新。您应该更新您的问题以反映您想要的行为，而不是它是否工作。

在这个阶段没有意义的浏览器修复，因为你在规范之外工作。我的建议是修改你的代码，以便你遵循规范通过以下方法之一：

• 使用


• 旋转绘画程式中的背景
$

• 使用canvas或SVG
b $ b
• 将背景放在旋转元素后面的元素上

如果这些元素都不能使用，

更新：我刚刚意识到我链接的规范已经超过了较新版本，其将预期行为阐明为：

< blockquote>

固定的背景受到为根元素指定的任何变换的影响，而不受任何其他变换的影响。

背景仍然像一个舷窗
进入固定到视口的图像，并且
元素上的变换影响舷窗，而不是后面的背景。在
另一方面，转换根元素仍然会转换
页面上的一切，而不是除了固定的
背景之外的所有东西。

假设通过不工作你的意思是背景不旋转，那么你正在做的不会在一个符合的浏览器工作。

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

解决方案

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.

这篇关于GIVE css3旋转到DIV在Chrome然后background-attachment：修复创建错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！