This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
You can skip over the test-cases if you just want my conclusion. I note them here for completeness. Begin test-cases (where "image" is the URL of some image): ======= data:text/html,<!doctype html> <html style="background:url(image);transform:scale(-1)"> Behavior: In IE10 Developer Preview, Firefox 13.0a1, and Opera Next 12.00 alpha, the transform has no visible effect. In Chrome 18 dev, it makes the background disappear (because it's rotated 180 degrees, out of view). data:text/html,<!doctype html> <html style="background:url(image);transform:scale(0.5)"> Behavior: In Firefox 13.0a1 and Opera Next 12.00, the transform has no effect. In Chrome 18 dev, it makes the background shrink to half its horizontal and vertical size, so that most of the screen is now white; the shrunk background is top-aligned and horizontally centered. In IE10 Developer Preview, it makes the background shift horizontally but stay the same size, presumably because it changes the edge of the canvas but doesn't scale the background-image itself. data:text/html,<!doctype html> <html style="background:url(image);transform:scale(0.5); transform-origin:top left"> Behavior: Same as the last one, except that Chrome 17 dev left-aligns the shrunk background instead of centering it, and IE10 Developer Preview doesn't shift the background. data:text/html,<!doctype html> <body style="background:url(image);transform:scale(-1)"> Behavior: The transform has no effect on anything in any of the four browsers. This is as expected, because the background image is hoisted up to the root element and the transform isn't. data:text/html,<!doctype html> <html style="transform:scale(-1)"> <body style="background:url(image)"> Behavior: Identical to the first test-case in all of the four browsers. This is as expected, because the background image is hoisted up to the root element. data:text/html,<!doctype html> <html style="background:url(image);transform:scale(-1)"> Behavior: In IE10 Developer Preview, Firefox 13.0a1, and Opera Next 12.00 alpha, the transform has no effect. In Chrome 18 dev, it causes almost the whole background to disappear (except 8px at the top because of the body's margin). data:text/html,<!doctype html> <html style="background:url(image);position:relative;left:50px"> Behavior: Chrome 18 dev doesn't change the background. IE10 Developer Preview, Firefox 13.0a1, and Opera Next 12.00 alpha shift it right by 50px. Chrome's behavior seems to contradict CSS 3 Backgrounds and Borders <http://dev.w3.org/csswg/css3-background/#special-backgrounds>. ======= End test-cases. Conclusion: there are three behaviors among browsers. 1) Firefox 13.0a1 and Opera Next 12.00 alpha paint the root element's background behind the entire viewport, completely ignoring transforms. 2) IE10 Developer Preview paints the root element's background behind the viewport, ignoring transforms; except that if a transform changes the location of the top left of the root element, that becomes the anchor point for backgrounds instead of the real top left. 3) Chrome 18 dev paints the backgrounds before transforming anything. If the transform exposes part of the canvas that would have been off-screen before the transform, that part is blank -- the background doesn't extend to that part of the screen. What should we spec? I think transforms *should* affect the background, like in WebKit. In particular, I would expect applying a transform to the root element to always transform all the visible contents of the page, including backgrounds. However, I don't think WebKit's behavior is ideal, because it only tiles the background onto the originally visible region of the screen, not any newly-exposed part. I suggest wording like the following (although this matches no browser yet): """ If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since the background painting area <http://dev.w3.org/csswg/css3-background/#background-painting-area> for the root element is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element's background were repeating dots, and a transformation of scale(0.5) were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport. """
Any objections to this new wording? It doesn't match any browsers, but I think it makes the most sense. I suspect that the way browsers behave here is probably accidental, because probably no one thought about it. (I believe Gecko has no tests for this, for one.)
There were no objections, so I added this to the spec: http://dvcs.w3.org/hg/csswg/rev/c58cad7f2de3 Please reopen if you think this should change.
Tests: http://hg.csswg.org/test/rev/a240ed94de4f More tests: http://hg.csswg.org/test/rev/892c3ee4d42e Mozilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=736253