This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

ابحث في الدعم

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

intermittent square borders on form submit buttons

more options

i have form submit buttons with rounded borders using "border-radius" css. i get intermittent square corners on the submit buttons. different corners each time. any ideas? the issue started firefox 23 and up.

i have form submit buttons with rounded borders using "border-radius" css. i get intermittent square corners on the submit buttons. different corners each time. any ideas? the issue started firefox 23 and up.

Modified by douglandmesser

الحل المُختار

I should mention that on the system I tested, hardware acceleration of graphics is disabled in the Options (Advanced => General => "Use hardware acceleration when available") for other reasons. This might or might not be relevant.

Read this answer in context 👍 0

All Replies (11)

more options

screenshot attached. the square borders appear on the hover event.

more options

Could you give the address of the page that has the problem? I think that will be faster than asking a lot of questions (also, this forum is not good for pasting HTML and CSS).

more options

the page is actually an offline web-based application that I am working on. I can provide the html and css however.

html:

<form action="whatever.html" class="forms" method=post>
<input class="inputs" type=submit value="Do Something">
</form>


css:

.forms
{
margin: 0px;
}

.inputs
{
color: #000000;
background-color: #ffffff;
border: 2px solid #000000;
border-radius: 10px;
font-family: arial;
font-size: 20px;
transition: all 0.5s;
}

.inputs:hover
{
border: 2px solid #ff6666;
box-shadow: -5px -5px 5px #6666ff, 5px -5px 5px #6666ff, -5px 5px 5px #6666ff, 5px 5px 5px #6666ff;
}


as you can see, nothing really fancy. just some formatting by css on the <form> and <input> elements. try it in firefox 23 and 25. you should see what I mean. anything older than 23 works.

Modified by cor-el

more options

That generates a different appearance than your screen shot: http://dev.jeffersonscher.com/temp/button-rounded-hover-shadow.html

more options

this is directly from the .html file with no changes:

<style> .buttons { color: #000000; background-color: #ffffff; border: 2px solid #000000; border-radius: 10px; font-family: arial; font-size: 20px; margin-right: 20px; transition: all 0.5s; }

.buttons:hover { background-color: #6666ff; border: 2px solid #ffffff; box-shadow: -5px -5px 5px #888888, 5px -5px 5px #888888, -5px 5px 5px #888888, 5px 5px 5px #888888; color: #ffffff; text-shadow: -2px -2px 2px #000000, 2px -2px 2px #000000, -2px 2px 2px #000000, 2px 2px 2px #000000; } </style>

<form> <input class="buttons" type=submit value="Cancel"> </form>

more options

Works for me, Fx25 on Windows 7 x64: http://jsfiddle.net/hx2Kg/1/

Still issues on your Firefox?

more options

الحل المُختار

I should mention that on the system I tested, hardware acceleration of graphics is disabled in the Options (Advanced => General => "Use hardware acceleration when available") for other reasons. This might or might not be relevant.

more options

when i turned off the hardware accelerator, and then restarted firefox, the issue went away. isn't that interesting...

thanks jscher2000!

more options

Hmmm, that sounds like a bug, more specifically, some kind of incompatibility with your graphics driver software. Could you post that information? You can copy it from the Troubleshooting Information page. Either:

  • Help > Troubleshooting Information
  • type or paste about:support in the address bar and press Enter

Select and copy the Graphics section and then paste it here. Before posting, place preformatting tags around the pasted text (<pre> before and </pre> after) to keep the lines from running together. For example:

Graphics
Adapter Description	ATI Radeon HD 3400 Series
Adapter Drivers	aticfx64 aticfx64 aticfx32 aticfx32 atiumd64 atidxx64 atiumdag atidxx32 atiumdva atiumd6a atitmm64
Adapter RAM	256
ClearType Parameters	Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 50
Device ID	0x95c5
DirectWrite Enabled	false (6.1.7601.18245)
Driver Date	5-24-2011
Driver Version	8.861.0.0
GPU #2 Active	false
GPU Accelerated Windows	0/7 Basic
Vendor ID	0x1002
WebGL Renderer	Google Inc. -- ANGLE (ATI Radeon HD 3400 Series Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote	false
AzureCanvasBackend	skia
AzureContentBackend	none
AzureFallbackCanvasBackend	cairo
AzureSkiaAccelerated	0
more options

Graphics Adapter Description Intel(R) Q45/Q43 Express Chipset Adapter Drivers igdumd64 igd10umd64 igdumdx32 igd10umd32 Adapter RAM Unknown Device ID 0x2e12 DirectWrite Enabled false (6.2.9200.16571) Driver Date 6-3-2011 Driver Version 8.15.10.2413 GPU #2 Active false GPU Accelerated Windows 0/1 Basic Vendor ID 0x8086 WebGL Renderer Google Inc. -- ANGLE (Intel(R) Q45/Q43 Express Chipset Direct3D9Ex vs_3_0 ps_3_0) windowLayerManagerRemote false AzureCanvasBackend skia AzureContentBackend none AzureFallbackCanvasBackend cairo AzureSkiaAccelerated 0

Modified by douglandmesser

more options

Intel has released a driver upgrade for that chipset, but it's safer to check with your system manufacturer to make sure your update includes any system-specific modifications they may have included.

Download Center - Intel® Graphics Media Accelerator Driver, Windows 7* 64, Windows Vista* 64 (exe) (11/16/2012; 8.15.10.2869).