965966 - diagonal corner edges of CSS borders are jagged rather than antialiased

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect, P3)

Description

[RDall]

Attachment: 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. http://cl.ly/image/0z3a1b000a1l

You can also find test case here: http://robertdall.com/testcase/boxes-test.html


Expected results:

Line should appear smooth.

Comment 1

[dfern]

[bugday-20140203]

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?

Comment 2

[dfern]

Attachment: 3 Screen Shots showing clarity.png

Comment 3

[[:Aleksej]]

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)?

Comment 4

[dfern]

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.
http://www.webupd8.org/2014/01/enable-hardware-acceleration-in-chrome.html

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

On Linux, I get a regression window that points to http://hg.mozilla.org/mozilla-central/rev/2f189d31161d , which enabled Azure on Linux.

https://twitter.com/stubbornella/status/431881756380131328 contains basically the same bug report.

I'm curious whether the regression window on other platforms also points to enabling Azure.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 7

[RDall]

I have tested https://twitter.com/stubbornella/status/431881756380131328 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…

Comment 8

[Piotrek Koszuliński]

I confirm that there's some regression in Firefox 27.0 (all OS-es): https://twitter.com/reinmarpl/status/436474693084647424. It was ok on Firefox 26. It affects CKEditor: http://dev.ckeditor.com/ticket/11594

Comment 9

[Grzegorz Kaliciak]

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: https://www.dropbox.com/s/34jblrb71yp3vvm/Screenshot%202014-04-08%2016.39.59.png

Comment 10

[Saurabh Anand [:sawrubh]]

I think this has been fixed recently, somehow. Can someone confirm?

Comment 11

[Saurabh Anand [:sawrubh]]

Never mind, I was confused. I didn't remember this was an issue on Linux. It was working for me on Windows :P

Comment 12

[Timo Poikola]

Hmm. Is this image there are some holes in right side of nose. http://ig.fi/acid2-seamonkey-2.30.png

Seamonkey 2.30 on Linux.

Comment 13

[minkwe]

This is still an issue on Firefox 42.0 on Linux. See for example:

http://jsbin.com/boheteteco/edit?html,css,js,output

Comment 14

[u279076]

Is this still reproducible? I can't seem to replicate the issue locally on Ubuntu 16.04.

Comment 15

[AnimalFriend]

Attachment: Rendering Windows, current stable release 63.0.3

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.

Comment 16

[David Bolter [:davidb] (NeedInfo me for attention)]

Thanks!