CODEWITHSUNDEEP
cssfirefoxcss-transforms
Richard S. Hall
Richard S. Hall

Reputation: 626

Why does Firefox 18 render elements with -moz-transform differently than Firefox 17?

I had some HTML/CSS that worked correctly in Firefox 17, but after upgrading to Firefox 18 it stopped behaving as I expected. I am not sure if I am doing something wrong in my CSS (which is entirely possible since I am new to this) or if there was a bug introduced in Firefox 18.

The following HTML file reproduces the issue:

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlay.transparent {
            background-color: transparent;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
    <div class="overlay">
        <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1">
            <div class="overlay transparent">
                <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
                </div>
            </div>
        </div>
    </div>
</body></html>

In Firefox 17, this produced to divs stacked on top of each other offset by 5px, but in Firefox 18 the top div is offset by much more. The odd part is, though, Firebug thinks the misplaced top div is still in the correct place, since if you select the div in its HTML tree viewer, it paints a highlight for the div in the same place that Firefox 17 would display it.

I've debugged this down to the point where I determined that if I remove the "style" attribute from the outer overlayFrame div, then the top overlayFrame div displays in the "correct" spot.

Is this a bug in Firefox 18 or in what I am doing? Thanks.

Upvotes: 3

Views: 688

Answers (2)

Boris Zbarsky
Boris Zbarsky

Reputation: 35074

There's a good chance that this is https://bugzilla.mozilla.org/show_bug.cgi?id=827577 given that testcase.

Upvotes: 1

N Rohler
N Rohler

Reputation: 4615

This problem is related to positioning contexts. It appears to be caused by nesting a position: fixed div within a div with position: absolute and vice versa. When you do this and overflow: hidden; is set, the fixed div positioning is based on the overall window (as it theoretically should be). However, when overflow: visible; is set, its positioning becomes based on the absolutely-positioned parent. Note how the behavior changes in Firefox when the overflow value is set.

The solution is to not nest the "paper" background divs; have the second follow the first and place both by themselves. Example [JSBin]: 

<html><head>
    <title>Transform test</title>

    <style>
        div.overlay {
            background-color: rgba(230, 230, 230, 0.8);
            bottom: 0;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
        }
        div.overlayFrame {
            background-color: white;
            border: 1px solid gray;
            overflow: hidden;
            position: absolute;
        }
        div.overlayFrame0 {
            bottom: 50px;
            left: 50px;
            right: 50px;
            top: 50px;
        }
        div.overlayFrame1 {
            bottom: 45px;
            left: 55px;
            right: 45px;
            top: 55px;
        }
    </style>       
</head>

<body>
  <div class="overlay"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame1"></div>
  <div style="-moz-transform: scale(1, 1);" class="overlayFrame overlayFrame0">
    Paper!
  </div>
</body></html>

Upvotes: 2

Related Questions