No outline on focused inputs in Firefox - javascript

It seems Firefox no longer displays an outline/highlight on focused elements. When I searched this topic, I got the impression that Firefox did this in the past by default, but discontinued it. Chrome, on the other hand, outlines the selected input with a light blue border:
I'm trying to create a Greasemonkey script in Firefox that allows users to scroll through checkboxes/radio buttons using the arrow keys. Whichever input is focused should be highlighted so users know it is selected.
Is there anyway to do this in the browser itself, i.e. make it so Firefox highlights the selected elements on pages by default? (Other than downloading a previous version of Firefox or adding CSS to my web site (I need this to work across sites))
I'm using Firefox 40.0.1 and Chrome 55.0.2883.87

Add input {outline-style: auto} in CSS file

Related

Unable to Change Button Selections on iOS Safari

On a webpage, I'm working on I have a series of buttons that are rendered on the page as repeating, generated <li> elements inside of <ul> tags. The selections are sequential, with a limit of one selection in the first list and the second list only being rendered after choosing from the first list. You can only choose one item in the first list and multiple items in the second one. When testing the webpage out on my iPhone I can't change my selection from the first section or deselect anything I've selected in the second list.
This issue is exclusive to pre-iOS 13 iPhones. Androids and iPhones with iOS 13 or later have no issues dealing with this page. This bug flew under the radar for me for a while because I was verifying my mobile changes by using the mobile view emulator on Chrome developer tools. The issue does not appear there.
I've looked everywhere for other people encountering this issue, but it doesn't seem that common. Should I tackle this via Javascript, CSS, or HTML?
So it turned out that this issue was due to jquery compatibility, and the fix was frustratingly simple. Just add onclick='' to the list elements and that restores normal intended functionality.

Google Chrome on iOS does not shift viewport on input field focus unlike Safari

I noticed some odd behavior with Google Chrome for iOS in contrast to how Safari behaves. For some reason, Google Chrome does not shift the viewport when clicking on an input field, which can often result in input fields being hidden on Chrome. Funnily, this behavior also occurs on Google's own homepage, where the input field is partially hidden and Google's search suggestions are completely hidden in Chrome:
On Safari, however, the viewport is moved up so that the input fields and all suggestions are visible:
This makes developing for iOS devices a bit of a pain since some users will not have the same experience when filling out forms or search fields which are not aligned to the top. Does anyone have an idea on how to fix this? Is there maybe some non-standard CSS which forces Chrome to shift the keyboard? Or is this maybe something that could be considered a bug in Chrome for iOS?

Protected HTML / CSS for js?. I can not change some attributes on running time

For business reasons (endless discussion about blog colours), we want to give "some tool" to the user (sort of techie) to play with the colour themselves.
The blog is a simple Wordpress and has some plugins (i.e. Google Calendar embedded with an iframe).
We ask the user to play in the address bar with sentences like:
javascript:document.getElementById("reply-title").style.cssText='color:#f0555f'; void 0
While this works and modifies the text colour of the selected element (the "leave a comment" text), it doesn't work for other elements, specifically one of the elements belonging to the Google Calendar iframe (the following is the date that appears on top of the calendar):
javascript:document.getElementById("currentDate1").style.cssText='color:#f0555f'; void 0
Is it possible that the items inside the iframe are in some way protected of being changed by JavaScript?
Well actually... you are doing it very inefficiently.
If you have Chrome, Firefox, Internet Explorer, Opera or... Safari:
you can "Right Click" on an element of the page an inspect the DOM.
And the styling (CSS). It will be more user-friendly even for Devz.
The items in an iFrame aren't protected from this.
For chrome, check chrome devtools.
EDIT: Also try pressing CTRL+ALT+RightClick if people are blocking it ;)

Selecting textpathes in Chrome is not selecting the intended text compared to Firefox

I would like to know why the Chrome is behaving completely different to Firefox in terms of the textpathes highlighting. I toggle a class with jQuery, so that the mouseovered text element is highlighted. In Firefox all is fine, so I'm wondering why Chrome behaves so different. I have prepared a jsfiddle.net/kwoxer/5uc17jwr/16/ for testing.
I marked the area where the mouse was with a red dot.
So if you test it in Firefox it works perfectly:
When you compare that with Chrome you can see that the mouseovered element is never accessable:
The reason for that is that Chrome behaving different in terms of the bounding box. Currently there is no solution for this. Just use Firefox instead =)

How does IE work with contentless anchor tags?

I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/
Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them

Categories