1007016 - Background gradient repeated when using certain font-size and border-radius

Status: NEW

(Core :: Layout: Block and Inline, defect, P4)

Description

[keeper]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0 (Beta/Release)
Build ID: 20140428193813

Steps to reproduce:

View this page: http://jsfiddle.net/k5kpt/

Or just use this style:

div {
    padding: 1em;
    font-size: 1.11em;
    background: linear-gradient(#000,#fff);
    display: inline-block;
    border: 1px solid red;
    border-radius: 10px;
}

I applyed a background linear gradient to an inline-block while also changing the font-size.

If I remove the font-size or the border-radius or the whole border the problem doesn't present itself.


Actual results:

The background is repeated in the last vertical row of pixels, using my style there's a row of black pixels at the bottom that shouldn't be there.


Expected results:

The background should not repeat at all. As an example simply adding "no-repeat" to the background style or removing the border-radius.