How to Prevent Hidden Element to Be Shown When Focused in Chrome

How to prevent hidden element to be shown when focused in Chrome?

Use tabindex="-1" on your "inner-button". That will prevent focus.
http://jsfiddle.net/GHgtc/2/

<input placeholder="focus on me then press tab" type="text">
<div id="container">
    <a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>

UPDATE:

I realized there is another possible solution to your issue while working on some focus issue of my own. You can use z-index:-1 if the focus you need is to be triggered later via javascript event.

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}

http://jsfiddle.net/GHgtc/3/

That will keep it focusable but hidden. And you can make it visible back with z-index:0 dynamically.

Chrome and Firefox overflow:hidden jumping elements

After more research I figured out that the problem is caused by an accessibility feature in chrome.

In my case I just needed to make sure the anchor tag is only accessible while hovering over the container element.

Therefore the solution was altering the CSS like this:

.container {
    position:relative;
    overflow:hidden;

    /* Optional */
    border:1px solid gray;
}

.focus-me {
    position:absolute;
    display:none;
}

.container:hover .focus-me {
    display:inline-block;
}

Prevent browser from re-positioning focused elements navigated to via tabbing

I was able to figure out a solution. What the browser does is that it scrolls the direct parent of the overflowing content to the position so that the focused element is right in the center. Simply modifying scrollLeft property of the parent element did the trick. So in the onFocus event of the link:

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}

Prevent Chrome from moving DOM element when showing text search result

I was able to prevent this behavior using JavaScript.

When Chrome moves the #wide-child div to show the search text, what it is actually doing is scrolling the contents of #parent to scroll the search text into view. This triggers a scroll event as would be expected, which can be listened for. When the scroll event fires, it is then possible to reset the element's scroll value to whatever it should be (probably 0).

Example:

document.getElementById('parent').addEventListener('scroll', function(e){  document.getElementById('parent').scrollLeft=0;  console.log('Prevented scrolling');});

#parent {  width: 30px;  overflow: hidden;}
#wide-child {  width: 500px;}

<div id="parent">  <div id="wide-child">    AAAAAAA    BBBBBBB    CCCCCCC    DDDDDDD    EEEEEEE  </div></div>

Prevent centring on focused input in hidden overflow area

Managed to work it out. Counter the scrolling that the browser does by doing document.getElementById('container').scrollTop = 0; whenever you programatically focus on an element outside of the visible area of an overflow: hidden div AND whenever a user inputs in such an element. Demonstrative JSFiddle (without prevention of input scrolling) http://jsfiddle.net/j2zurbbv/2/.

Forcing a tab stop on a hidden element? Possible?

Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.

(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)

---

Related Topics