927410 - Graphic anomaly on combined Back button.

Status: RESOLVED INVALID

(Core :: Graphics, defect)

Description

[Gary [:streetwolf52]]

Attachment: Graphic anomaly on large back button.

What did you do? (steps to reproduce)
-------------------------------------
1. Use large icons.
2. Only have the back icon displayed. If the forward button is displayed there is no problem as well as both buttons not being combined.
3. Visit a trusted site such as https://addons.mozilla.org/en-US/firefox/
4. If anomaly isn't apparent right away go to a regular site then back to the trusted site.  Might need to do this a few times.

What happened? (actual results) 
-------------------------------	
The back button has a blue rectangle on it (outlined in red) which seems to square off the URL bar which is curved due to the round button. There could be a larger rectangle of even a few of them.

What should have happened? (expected results)
---------------------------------------------
No graphic anomalies on lone back button.

This problem might be related to https://bugzilla.mozilla.org/show_bug.cgi?id=837489 although I only have some Chrome corruption and no Content corruption.

The problem only seems to be tied only to trusted sites with the green lock.

Comment 1

[Gary [:streetwolf52]]

Graphics
--------
{
  "application": {
    "name": "Firefox",
    "version": "27.0a1",
    "userAgent": "Mozilla/5.0 (Windows NT 6.3; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0",
    "supportURL": "https://support.mozilla.org/1/firefox/27.0a1/WINNT/en-US/"
  },
  "graphics": {
    "numTotalWindows": 1,
    "numAcceleratedWindows": 1,
    "windowLayerManagerType": "Direct3D 10",
    "windowLayerManagerRemote": false,
    "adapterDescription": "AMD Radeon HD 7900 Series",
    "adapterVendorID": "0x1002",
    "adapterDeviceID": "0x6798",
    "adapterRAM": "3072",
    "adapterDrivers": "aticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64",
    "driverVersion": "13.200.16.0",
    "driverDate": "9-26-2013",
    "adapterDescription2": "",
    "adapterVendorID2": "",
    "adapterDeviceID2": "",
    "adapterRAM2": "",
    "adapterDrivers2": "",
    "driverVersion2": "",
    "driverDate2": "",
    "isGPU2Active": false,
    "direct2DEnabled": true,
    "directWriteEnabled": true,
    "directWriteVersion": "6.3.9600.16384",
    "webglRenderer": "Google Inc. -- ANGLE (AMD Radeon HD 7900 Series Direct3D9Ex vs_3_0 ps_3_0)",
    "info": {
      "AzureCanvasBackend": "direct2d",
      "AzureSkiaAccelerated": 0,
      "AzureFallbackCanvasBackend": "cairo",
      "AzureContentBackend": "direct2d"
    }
  }

Comment 2

[Gary [:streetwolf52]]

If I pad-left the identity box 8 pixels I no longer get the graphic glitch in the back button. Of course this isn't as visually appealing and causes other visual problems in the URL bar as a result in the new position.

I also have this same sort of glitch with my bookmark buttons when using some css code that modifies the buttons.  I think I narrowed it down to either the 'inset' option or Box-Shadow in general. An example snippet:

box-shadow: 0 1px hsla(0,0%,100%,.0) inset,
				0 1px hsla(210,54%,20%,0),
				0 0 2px hsla(210,54%,20%,0) !important;

The default buttons don't have this problem.

Again, disabling Azure fixes all these problems.  As was stated before AMD places the blame on Mozilla for these glitches.

Comment 3

[Gary [:streetwolf52]]

This one liner seems to have fixed my problem without affecting the layout that I can notice.  


#back-button{-moz-margin-end: -1px !important;}

Comment 4

[Gary [:streetwolf52]]

I just tried the latest inbound hourly and even without the one liner above I no longer get the glitch.  Was something fixed on inbound in the past few days?

Comment 5

[Gary [:streetwolf52]]

I was wrong.  I get the glitch without my code.  However it is now a very thin rectangle.  Maybe 1 or 2 pixels wide.

Comment 6

[Gary [:streetwolf52]]

After doing some testing I think I narrowed down the cause of my problem.  It appears to be the use of 'inset' on box-shadow.  I modified your css code and commented out the inset and I do not get the corruption on the back button.  Here's my code taken from yours.  The only difference is I commented out the two insets.

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #back-button > .toolbarbutton-icon {
  border-radius: 10000px!important;
  padding: 5px!important;
  border: none!important;
  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1))!important;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) /*inset*/,
              0 0 0 1px hsla(0,0%,100%,.3) /*inset*/,
              0 0 0 1px hsla(210,54%,20%,.25),
              0 1px 0 hsla(210,54%,20%,.35)!important;
  transition-property: background-color, box-shadow!important;
  transition-duration: 250ms!important;

My custom Bookmarks toolbar also uses inset and has the same sort of corruption on it's buttons.  Commenting out the insets fixes this problem also.

Is there some inherent problem with inset on box-shadow?