1118957 - skewed elements with inset box-shadow do not properly blend in with background elements

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[hans2520]

Attachment: FF inset-box shadow bug.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141126041045

Steps to reproduce:

Suppose you are utilizing a rectangular element along with :before and :after pseudo-elements to create a trapezoidal type graphic whereby the the before/after pseudo-elements are parallelograms placed on each end of the rectangle, thus when overlaid properly, create the trapezoid shape. Each of the before/after pseudo-elements use the skew transformation in order to create achieve the parallelogram shape. As long as all elements and corresponding pseudo-elements are of the same background color and have no intersecting boundaries, the overall look will be that of a seamless trapezoid.

Now further suppose that to give this graphic a distinct look, you utilize an inset box-shadow which will be applied to the edges of your trapezoid. This requires careful application of the box-shadow on each of the parent element and its before/after pseudo-elements so as to not put the shadow in the middle of the figure, thus eliminating the trapezoidal appearance. 

Here is some sample CSS used to achieve the desired result:

label {
    background: white;
    color: white;
    background: #EAE7E7; 
    background-color: #02686A;
    background-image: linear-gradient(top, #00b5b8, #025c5e);
    padding: 0.6em 0em; 
    position: relative;
    box-shadow: inset 0 3px 0px -1px red, 0px -13px 15px -14px #013536;
    border-radius: 5px 5px 0px 0px / 2.7px 2.7px 0px 0px;

    transition: all 0.5s ease, z-index 1ms, box-shadow 300ms;
    margin: 0;
    width: 8em;
    display: inline-block;
    text-align: center;
    top: -0.6em;
}

label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.0em;
    right: 7.1224em;
    bottom: 0;
    width: 1.5em;
	
    background-color: #02686A;
    background-image: linear-gradient(to bottom, #00b5b8, #025c5e);
    background: #02686A;  
    box-shadow: 2px 2px 0px 0px red inset, -8px 1px 13px -4px #013536;

    transform: skew(-28deg);
    border-radius: 4px 0 0 0;
    transition: all 0.5s ease, z-index 1ms;
}

label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.0em;
    right: -0.6276em;  
    bottom: 0;
    width: 1.5em;
	
    background-color: #02686A
    background-image: linear-gradient(to bottom, #00b5b8, #025c5e);
    background: #02686A; 
    box-shadow: -2px 2px 0px 0px red inset, 8px 1px 13px -4px #013536;

    transform: skew(28deg);
    border-radius: 0 4px 0 0;
    transition: all 0.5s ease, z-index 1ms;
}

The labels were used for radio inputs (overall desire is to create pure CSS UI "tabbed" interface, using "folder" type graphics for each of the tabs), but this should also work just the same for divs (although I have not tested it with divs).

The attached screenshot should show the thin undesired border which appears around the parallelogram shapes. (Note that this border color is actually red, as it is coming from the inset box-shadow color, however it is so thin it is difficult to tell. Using a small blur-radius value as I mentioned above removes the unintended border regions.)

Note that I am using the latest stable release of FF, which is 34.0.5.


Actual results:

When using an inset shadow color which starkly contrasts with the regular trapezoid background color, as well as setting the "blur-radius" parameter to a non-zero value, the box-shadow property on FF will necessarily create a thin "border" of the inset shadow color on the skewed pseudo-elements in unintended regions (i.e. around the entire shape, regardless of the x and y offsets), thus breaking the trapezoid graphic. This border will not appear if any of the below conditions are true:

- The element is not skewed. That is, the unintended border regions disappear if the element has no skew value.
- The blur-radius parameter of box-shadow is non-zero. This is the workaround I am currently using. For example, setting a blur-radius value of 0.3586px or greater at 100% DPI will remove the unintended border regions. However, too great a value here (i.e. > 3px) will necessarily create the effect around all edges of the element as the blur radius increases, so there is a small margin here. The greater the viewing DPI of the webpage, the smaller the non-zero value requirement is.
- Using a different web browser, such as Chrome or IE.




Expected results:

There should not be a border around the entire psuedo-element when the box-shadow parameter values are as in my sample CSS, however in Firefox there is. 

One could argue that there should always be a thin border regardless of the chosen blur-radius parameter and other browser behavior (although I would posit otherwise on the first point); however in my estimation, the skew transformation should not have any impact the appearance of said border, so this is inconsistent behavior in that regard and thus appears as a defect one way or another. 

Alternatively, the ability to properly stack the before/after pseudo-elements underneath their parent element (such that the top edges are not skewed) would also directly solve this problem for me, alas from my research on stacking contexts, this won't really be possible without additional markup if I need this element to be in a new stacking context relative to other elements of the same shape. Needless to say, I don't want additional markup with this.

Comment 1

[hans2520]

Also somewhat annoyingly, and perhaps related to the original problem, there is a thin white border along the outside edge of the skewed elements as well. I have not figured out why this thin white border is present or how to remove it when the element is skewed.