Question

I built a ribbon box with a parallax effect here: http://method.ac.

If you look at the corners of the subscribe box in IE9, you will see that they don’t behave as expected, they are jumping from their mirrored state (via ms-transform: scale(-1, 1) to normal, but only some times. It works fine in Opera, Firefox, Safari and Chrome.

I’m changing the height on scroll with jquery.

The background is an svg. I can’t use four different images because webkit has a bug where it doesn’t render the svg if viewBox is set to 0 0 1 1 and the black triangle is on the upper left corner (go figure).

Any help is greatly appreciated.

Answer 1

Since the bug seems to be related to the svg, perhaps you should go about making those corners by a different method. I propose border art. The CSS would be something like:

.corner {
    width: 0px;
    height: 0px;
    position: absolute;
    z-index: 1;
    border: 10px solid #1f1f1e;
    border-top-width: 3px; /* reset to half your height by your javascript */
    border-bottom-width: 3px; /* reset to half your height by your javascript */
}

.left.corner {
    left: -10px;
    border-right-color: #cbc7bb;
}

.bottom.corner {
    bottom: -6px; /* reset to full height by your javascript on the element */
    border-top-color: #cbc7bb; 
}

.top.corner {
    top: -6px; /* reset to full height by your javascript on the element */
    border-bottom-color: #cbc7bb; 
}

.right.corner {
    right: -10px;
    border-left-color: #cbc7bb;
}

I believe this should help keep everything cross browser including your IE9 issue.