diagonal corner edges of CSS borders are jagged rather than antialiased

NEW
Unassigned

Status

()

Core
Graphics
3 years ago
9 months ago

People

(Reporter: RDall, Unassigned, NeedInfo)

Tracking

(Blocks: 1 bug, {regression})

Trunk
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [bugday-20140203][gfx-noted])

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8368128 [details]
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

3 years ago
[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

3 years ago
Created attachment 8369479 [details]
3 Screen Shots showing clarity.png

Comment 3

3 years ago
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]

Comment 4

3 years ago
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
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.
Status: UNCONFIRMED → NEW
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
Keywords: regression
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.
(Reporter)

Comment 7

3 years ago
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

3 years ago
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

3 years ago
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
Blocks: 289480
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

Comment 12

3 years ago
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

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

http://jsbin.com/boheteteco/edit?html,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]
You need to log in before you can comment on or make changes to this bug.