908674 - CSS Gradients and other graphical issues in Firefox 25 Aurora

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Evgueni Naverniouk]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20130823004003

Steps to reproduce:

This issue only appeared in Firefox 25 Aurora release. Did not occur in Firefox 24 branch. Happens on both Mac OS and Windows.


Actual results:

CSS linear gradients aren't displayed correctly when using rgba() values.

Use the following CSS on an element as a comparison:

-moz-linear-gradient(center top , #555555, rgba(120, 120, 120, 0.2) 80%, rgba(80, 100, 150, 0.3)) repeat;

Also, there is now an ugly white box around text that is typed inside an <input> element. This happens only when the input is focused and being typed in. The white box disappears after bluring the input.




Expected results:

No rendering changes were expected.

Comment 1

[Evgueni Naverniouk]

Also noticed that a lot of <img>s are also displayed with ugly artifacts, as if anti-aliasing has been disabled.

Comment 2

[Robert Longson [:longsonr]]

You're going to have to keep to one issue per bug or this will get closed.

Comment 3

[Drew Willcoxon :adw]

Are all these problems happening on multiple systems?  It sounds like your graphics card(s) may have become unsupported, but I have a late-2008 MacBook with no problems.  Could you please open Troubleshooting Information from the Help menu, copy the Graphics section of the resulting page, and paste it here?  Also, screenshots of the problems would be helpful.  Finally, please try to reproduce in safe mode with all add-ons disabled: https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Comment 4

[Evgueni Naverniouk]

Actually, now that I check again. These problems are only happening on my Mac OS X 10.8.4 (2010 iMac with ATI Radeon HD 2750 1024 MB). Here is the troubleshooting section from the Mac:

Graphics
Device ID	0x68a1
GPU Accelerated Windows	1/1 OpenGL (OMTC)
Vendor ID	0x1002
WebGL Renderer	ATI Technologies Inc. -- ATI Radeon HD 5750 OpenGL Engine
windowLayerManagerRemote	true
AzureCanvasBackend	quartz
AzureContentBackend	quartz
AzureFallbackCanvasBackend	none
AzureSkiaAccelerated	0

Comment 5

[Evgueni Naverniouk]

Attachment: Gradient issue on Mac - Firefox 22 vs 25

Comment 6

[Evgueni Naverniouk]

Attachment: Text Input issue - Firefox 25

Comment 7

[Evgueni Naverniouk]

Comment on attachment 795452 [details]
Gradient issue on Mac - Firefox 22 vs 25

CSS for tab:

    background-color: rgba(49, 49, 49, 0.55);
    background-image: -moz-linear-gradient(center top , #333333, rgba(20, 20, 20, 0.1));
    border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1) -moz-use-text-color;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px 6px 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #DDDDDD;
    display: block;
    text-shadow: 0 1px 1px #000000;
    transition: all 0.5s ease-out 0s;

Comment 8

[Evgueni Naverniouk]

Comment on attachment 795453 [details]
Text Input issue - Firefox 25

CSS for input field:

    background-color: #ECECEC;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #D8D8D8);
    border-color: #CCCCCC #FFFFFF #FFFFFF #CCCCCC;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 1px 2px 4px #999999 inset;
    color: #333333;
    font-size: 22px;
    text-indent: 8px;
    text-shadow: 0 1px 0 #FFFFFF;
    transition: all 0.5 ease-in-out;

Comment 9

[Drew Willcoxon :adw]

Thanks for the info.  The facts that these two glitches happen in seemingly unrelated parts of Gecko and only on your Mac suggest some Core::Graphics problem, so moving there for further investigation.

Comment 10

[Gregory Pappas [:gregp]]

Unable to reproduce in current versions.