将 css3 旋转到 Chrome 中的 DIV 然后背景附件:修复创

问题描述

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

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.

检查这个 http://jsfiddle.net/P3jS4/

现在我正在开发 chrome18.

当您删除旋转 css 时，背景附件:固定工作正常.

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

http://jsfiddle.net/P3jS4/2

推荐答案

这不是错误.

您正在尝试做一些尚未定义的规范.它在评论中说:

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:

• 使用 img 而不是背景
• 使用画布或 SVG
• 在绘画程序中旋转背景
• 将背景放在旋转元素后面的元素上

如果这些都不能使用，并且没有其他解决方法可用，那么您的答案是无法完成.

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.

这篇关于将 css3 旋转到 Chrome 中的 DIV 然后背景附件:修复创建错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！