Closed Bug 965966 Opened 6 years ago Closed 11 months ago

diagonal corner edges of CSS borders are jagged rather than antialiased


(Core :: Graphics, defect, P3)






(Reporter: robert, Unassigned, NeedInfo)



(Keywords: regression, Whiteboard: [bugday-20140203][gfx-noted])


(3 files)

Attached file boxes-test.html
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36

Steps to reproduce:

Created an diagonal line with border-left, border-right, border-top. 

Actual results:

Line appears jagged and unlike results in safari and chrome. See screenshot:  Firefox on left and Chrome on the right.

You can also find test case here:

Expected results:

Line should appear smooth.

Tested on FF Nightly 29.0a1 (2014-02-03) Windows 7 32 bit

I am unable to reproduce this issue.

Attached is a shot showing that I see the same smooth graphic on the following browsers.

What is interesting is that IE8 the text is across the top instead of in the middle and there is no down arrow in the first box

Chrome 32 looks the same as FF Nightly 29.0a1 (2014-02-03)

Does the bug happen with the latest Nightly for you?
I have no hardware acceleration here, and the line is jagged for me in 2014-02-03-03-02-03-mozilla-central-firefox-29.0a1.en-US.linux-x86_64.  It is not jagged (also w/o hw acceleration) in Chromium Version 31.0.1650.63 Debian jessie/sid (238485).

dfern, what if you disable hardware acceleration (Options → Advanced → General)?
OS: Mac OS X → All
Whiteboard: [bugday-20140203]
You are right if I toggle the option 
Tools |Options | Advanced | General | "Use Hardware acceleration where available"  
and close and reopen FF the image is jagged.
this option does not take unless you close and reopen the browser.

For Chrome I tried these steps and was unable to make Chrome display jagged lines.
On Linux, I get a regression window that points to , which enabled Azure on Linux. contains basically the same bug report.

I'm curious whether the regression window on other platforms also points to enabling Azure.
Component: Untriaged → Graphics
Ever confirmed: true
Product: Firefox → Core
Hardware: x86 → All
Summary: Diagonal lines render jagged when using border properties → diagonal corner edges of CSS borders are jagged rather than antialiased
Version: 26 Branch → Trunk
This *might* be a duplicate of bug 805393, though only if Azure was enabled on Mac *way* before it was enabled on Linux, since that was filed well before the regression window on Linux.
I have tested and it shows the same bug. How could I test this for you on my 27" iMac. 

ps. I am just a web designer/developer so no skill or experience in programing…
I confirm that there's some regression in Firefox 27.0 (all OS-es): It was ok on Firefox 26. It affects CKEditor:
I confirm the issue on Fx 28 and Nightly 31 @ Win XP and Win 8. However, the issue doesn't occur on OSX  10.9 (Fx 28) once we use even border widths for all edges.

This is how our clients' websites look like on Windows Firefox:
Blocks: acid2
I think this has been fixed recently, somehow. Can someone confirm?
Never mind, I was confused. I didn't remember this was an issue on Linux. It was working for me on Windows :P
Hmm. Is this image there are some holes in right side of nose.

Seamonkey 2.30 on Linux.
This is still an issue on Firefox 42.0 on Linux. See for example:,css,js,output
Is this still reproducible? I can't seem to replicate the issue locally on Ubuntu 16.04.
Flags: needinfo?(robert)
Whiteboard: [bugday-20140203] → [bugday-20140203][gfx-noted]
Looking good on latest stable Win64 release, 63.0.3.

Rendering using Direct3D 11 (Advanced Layers), HW acceleration on.

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Suggesting close.
Flags: needinfo?(dbolter)
Closed: 11 months ago
Flags: needinfo?(dbolter)
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.