Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.

• Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
• Do NOT click the Reset button on the Safe Mode start window

• https://support.mozilla.org/kb/Safe+Mode
• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Hi I ran Firefox in safe mode and unchecked hardware acceleration. I don't have any other themes besides default. The close button was still weird in safe mode. :(

Can you try a different Windows theme is case the current Windows theme isn't fully compatible with Firefox?

I've seen another question with similar looking screenshots attached, so you're not the only one.

• [/questions/1082269]

I am using the default theme for windows 10. I tried downloading another theme and tried switching to it but it didn't change the x button.

Try to set layout.css.devPixelsPerPx to 1.0 (default is -1) on the about:config page to see if that has effect.

You can open the about:config page via the location/address bar. You can accept the warning and click "I'll be careful" to continue.

• http://kb.mozillazine.org/about:config

I changed it to 1.0 and restarted Firefox but it doesn't look like it had any effect.

It looks that the width of the close button is too large causing the button that is positioned next to it in the file to appear.

This is the image file:

• chrome://global/skin/icons/close.svg

The SVG source:

• view-source:chrome://global/skin/icons/close.svg

I don't know what Firefox makes of this SVG file on Windows 10 that makes it behave like in your case.

You can find the CSS rules at the end of this file:

• chrome://global/skin/global.css

/* :::::: Close button icons ::::: */

.close-icon {
  -moz-appearance: none;
  height: 16px;
  width: 16px;
  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 16, 16, 0);
  background-position: center center;
  background-repeat: no-repeat;
}

.close-icon:hover {
  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 32, 16, 16);
}

.close-icon:hover:active {
  background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 48, 16, 32);
}

Sorry, I don't know anything about Css or how to get to it so I'm a bit confused. I usually don't mess with the settings on things.

Is it caused by something I did? Is there anything I can do to fix it?

Never mind. The new update fixed the buttons. Thank you for your assistance, :)

Edit: Problem returned after windows update.

I also have this exact problem, and it must be quite rare as this is the only instance I could find of it happening to anyone else. Unfortunately I still have this problem and have had for a few months now. I've tried all the solutions above (apart from the code-altering one which I couldn't follow), I've fully updated my graphics drivers, done a full re-install of Firefox (including use of Revo uninstaller to remove all traces of Fireox before installing again) to no avail. Any insight on this would be great. I'm using a Lenovo Ideapad U430 touch, Windows 10. Graphics: Intel HD Graphics 4400 and Nvidia GT 730M.

Since updating my display drivers I also now have a one-pixel-wide white line down the left hand side of the Firefox window, which doesn't appear using any other application. Also in windowed mode, Firefox has the same white border down the left but also along the top.

It was solved on my computer when Firefox got updated but the problem returned for me after Windows updated. I re-tried the solutions and nothing worked. I was just trying to ignore it but now that I hear someone else has it I'll mark it as unsolved again.

For the short time it was fixed, the button had a totally different graphic. It was an x in a grey circle. But now it has changed back to the weird red half-box. I was hoping it would fix itself in an update eventually, but It's been about a month so I don't know. :(