1205793 - pseudo selector pixel rounding/Anti Aliasing is jagged on :after with certain border sizes

Status: RESOLVED DUPLICATE of bug 1185636

(Core :: Graphics: Layers, defect)

Description

[valeness84]

Attachment: Result on Firefox on Linux Mint

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:40.0) Gecko/20100101 Firefox/40.0
Build ID: 20150603100924

Steps to reproduce:

<div class="toast">
  Please Select a Style
</div>

<style>
.pdp-toast {
    position: absolute;
    width: 160px;
    left: 14px;
    padding: 4px 12px;
    background: #f25f5c;
    color: #ffefe5;
    font-size: 12px;
}

.pdp-toast:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -12px;
    top: 0;
    border-top: 12px solid rgba(0, 0, 0, 0);
    border-bottom: 12px solid rgba(0, 0, 0, 0);
    border-right: 12px solid #f25f5c;
}

.pdp-toast:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -12px;
    top: 0;
    border-top: 12px solid rgba(0, 0, 0, 0);
    border-bottom: 12px solid rgba(0, 0, 0, 0);
    border-left: 12px solid #f25f5c;
}
</style>

http://codepen.io/anon/pen/GpZMRW


Actual results:

Right Triangle :after is jagged


Expected results:

Smooth AA lines on :after element

Comment 1

[Loic]

Rendering is fine with FF40 on Win 7 (HWA on/off)

Comment 2

[Lee Salzman [:lsalzman]]

I suspect this is just bug 1185636, which wasn't fixed in the build I believe you're running from June. Could you possibly try with a beta or nightly build and see if it's fixed there as a result of the fixes I made related to CSS border rendering?

Comment 3

[BugBot [:suhaib / :marco]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.