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.
Được chỉnh sửa bởi douglandmesser vào
Giải pháp được chọn
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.
Đọc câu trả lời này trong ngữ cảnh 👍 0Tất cả các câu trả lời (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.
Được chỉnh sửa bởi cor-el vào
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?
Giải pháp được chọn
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
Được chỉnh sửa bởi douglandmesser vào
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).