intermittent square borders on form submit buttons
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
Chosen solution
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.
Skaityti atsakymą kartu su kontekstu 👍 0All Replies (11)
screenshot attached. the square borders appear on the hover event.
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).
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
That generates a different appearance than your screen shot: http://dev.jeffersonscher.com/temp/button-rounded-hover-shadow.html
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>
Works for me, Fx25 on Windows 7 x64: http://jsfiddle.net/hx2Kg/1/
Still issues on your Firefox?
Chosen Solution
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.
when i turned off the hardware accelerator, and then restarted firefox, the issue went away. isn't that interesting...
thanks jscher2000!
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
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
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).