We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

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.

Izmjenjeno od strane douglandmesser

Izabrano rješenje

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.

Pročitajte ovaj odgovor sa objašnjenjem 👍 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.

Izmjenjeno od strane 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

Odabrano rješenje

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

Izmjenjeno od strane 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).