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

Question

I have a strange problem today, in Chrome, when I focus on an element that is absolutely positioned out of its overflow hidden container, it gets visible in Chrome browser (Mac).

I've made a fiddle to illustrate the problem : http://jsfiddle.net/GHgtc/

Html

    <div id="container">
        <a id="inner-button" href="#">You can see me !</a>
    </div>

Css

#container{
    display: block;
    background: blue;
    width: 200px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

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

Thanks for your help !

Cheers !

Answer 1

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.