CSS3 transform:rotate() and several DIVs with position: absolute_问答_开发者

When using a css3 transform:rotate() in div that contains elements with global positions.

<html>
<style>
body {
    background: 开发者_开发问答#666;
}

.sticker {
    position: absolute;
    top: 200px;
    left: 100px;
    width: 250px;
    height: 250px;
    background: #ccc;    
}

#sticker2 {
    -moz-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: 200px;
    left: 500px;

}


.sticker-decoration {
    display: block;
    font-size: 0.1px;
    position: absolute;
    z-index: 99999;
}

.sticker-n, .sticker-s{
    background: url(standart-sides-horizontal-f1f1f1.png) repeat;
} 

.sticker-e, .sticker-w {
    background: url(standart-sides-vertical-f1f1f1.png) repeat;
}

.sticker-se, .sticker-sw, .sticker-nw, .sticker-ne {
    background: url(standart-corners-f1f1f1.png) repeat;
}


.sticker-n {
    height: 38px;
    left: 0;
    top: -38px;
    width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: 0;
    width: 100%;
    background-position: bottom left;
}
.sticker-e {
    height: 100%;
    right: -38px;
    top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    height: 100%;
    left: -38px;
    top: 0;
    width: 38px;
    background-position: top left;
}
.sticker-se {
    height: 38px;
    bottom: -38px;
    right: -38px;
    width: 38px;
    background-position: bottom right;
}
.sticker-sw {
    bottom: -38px;
    height: 38px;
    left: -38px;
    width: 38px;
    background-position: bottom left;
}
.sticker-nw {
    height: 38px;
    left: -38px;
    top: -38px;
    width: 38px;
    background-position: top left;
}
.sticker-ne {
    height: 38px;
    right: -38px;
    top: -38px;
    width: 38px;
    background-position: top right;
}

</style>

<body>
<div class="sticker">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

<div class="sticker" id="sticker2">
    <div class="sticker-decoration sticker-n"></div>
    <div class="sticker-decoration sticker-e"></div>
    <div class="sticker-decoration sticker-s"></div>
    <div class="sticker-decoration sticker-w"></div>
    <div class="sticker-decoration sticker-se"></div>
    <div class="sticker-decoration sticker-sw"></div>
    <div class="sticker-decoration sticker-ne"></div>
    <div class="sticker-decoration sticker-nw"></div>    
</div>

</body>
</html>

Result in Firefox http://cjslade.github.com/Exp2/ff.png

Similarly in Opera and Safari. Chrome renders it fine.

Example http://cjslade.github.com/Exp2/

Does anyone have a solution?

Because the CSS3 transform specification is still a working draft, this kind of annoying bugs are still poping up in some browsers that still don't fully support the specification or simply because of bugs they have.

To workaround your problem and fill the 1 pixel gap around the corners, you can simply stretch the divs 1 pixel wider in order to cover up the gap.

I only changed the following properties marked with a comment // was...

.sticker-n {
    height: 38px;
    left: -1px;            // was   left: 0;
    top: -38px;
    right: -1px;           // was   width: 100%;
    background-position: top left;
}
.sticker-s {
    bottom: -38px;
    height: 38px;
    left: -1px;            // was   left: 0;
    right: -1px;           // was   width: 100%;
    background-position: bottom left;
}
.sticker-e {
    bottom: -1px;          // was   height: 100%;
    right: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top right;
}
.sticker-w {
    bottom: -1px;          // was   height: 100%;
    left: -38px;
    top: -1px;             // was   top: 0;
    width: 38px;
    background-position: top left;
}

jsFiddle demo Works fine in Firefox 6. Not sure about Opera and Safari, but should also work on these browsers.

I don't like this fix, but at the moment I don't see any other cleaner way