Checkbox not checking inside div in Firefox - html

Weird problem. I don't know if anyone can shed some light on this? I have a checkbox inside a div. It works fine in IE but not Firefox. I have to click the space around the checkbox that is occupied by the div (sort of like a label) for the checkbox to tick on and off. Directly clicking the checkbox does not show it as ticked on or off, even though in firebug it is showing that it is in a checked state and an unchecked state.
Only in FF does this happen.....

I think this is a bug in firebug. Disabling firebug will stop this behaviour happening.
I had a similar strange thing happening with radio buttons. Disabling firebug fixed it.

Related

checkbox respond slowly on IE11

i have more than 100 checkboxes on a page. when checkbox is clicked, check-mark appear after seconds delay.
it works fine on chrome but problem is only found on Internet Explorer.
remove all css and click event wont solve the problem. its seems like default behavior of IE.
one interesting fact, if around 50 checkboxes appear on screen, problem goes away. no slowness is observed if checkboxes are not in hundreds.
Please suggest.

Weird title on inputs / textareas all around the web

When I mouse over many inputs and textareas all over the web, I see some weird text.
I thought it was on StackExchange only, but it happens on amazon:
(note that you can't see my mouse in these pictures, it is not recorded in the screenshot, but it is on the upper-left of each hover text.
Chrome's DevTools shows a weird title attribute:
I have no idea why this happens. The websites I've seen this on don't seem to have a library in common, so I doubt that would cause the problem. At the same time, I have seen this in browsers other than chrome, so I don't know. Even the textarea that I'm typing in right now has the problem.
Why does this happen and how can I prevent it from happening to my website?
Looks like that's a built-in Chrome option, an "experimental feature." Go to chrome://flags/ and disable "Show Autofill predictions" if you want to turn it off (mine was disabled by default).

iOS Safari autofill sugestions overflap fixed position bottom element

I have a very inconsistent issue with iOS Safari on iOS 10.2/10.2.1 (at least). On many iPhone 7,6,4 it works without an issue but on at least 2 iPhone 7 I had this issue.
I have a position: fixed; bottom: 0; input element on my page. If the placeholder is e.g. Name, Safari will offer to autofill it with a contact name in the suggestion box above the keyboard.
The problem is that on some devices, this suggestion box of the keyboard will overlap the input element at the bottom of the page:
The suggestion bar was expanded when the keyboard opened and was not manipulated afterwards by collapsing/expanding it.
On many tested devices this does not happen, only on a few of them.
Only the suggestion bar seems to be the issue. The normal input switch bar does not exhibit the problem. When I change the placeholder to something else, Safari won't try to autofill it and everything seems fine:
(Except for the small white gap at the bottom but I could live with that)
Does someone know why this might be happening on some devices? And maybe even how I could go about fixing this?
(Side note regarding a possible workaround: As I said it seems like Safari parses the placeholder to decide when and what to offer as autofill. When I change it to something else it won't show up. Simply disabling it for that one field like that would be finde but the same thing happens on an "Email" field and there is no smart alternative word to use as a placeholder.)
For whatever it is worth, I just had this issue and resolved it by switching out the <input> element for a <textarea> element. Everything is working as expected -- I am not seeing the autofill suggestion anymore.

Can we tab through all radio buttons in Chrome Browser?

I have got an issue in Chrome Browser.During Tabbing for Radio Button's
only selected button is getting focused. On tab press it should move to next Radio Button, but it not moving.
As googled only solution is to use 'Down Arrow' Key. May I know if any other alternative solution to move on Tab Key Press?
Issue is only in Chrome, working fine for IE and Firefox.

Internet Explorer 7 textarea field and dropdown fields

We have a client who is using IE7 and for some reason drop-down boxes and text-area area fields are not displaying correctly. The arrow for the drop-down box does not appear and the right border of the text-area box does not display.
Works in IE 8/9, Chrome, FF. See image attached
Does anyone know what is causing this and how I can fix?
This is a html/php app
You didn't include the markup so we can only guess. There is no way to know for sure. I would inspect the textboxes in Firebug or something similar and see if they're inheriting styles that you aren't aware of.