Come impedire la visualizzazione di elementi nascosti quando ci si concentra in Chrome?

Question

Oggi ho un problema strano, in Chrome, quando mi concentro su un elemento che è assolutamente posizionato fuori dal suo contenitore nascosto overflow, diventa visibile nel browser Chrome (Mac).

Ho fatto un violino per illustrare il problema: 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; 
} 

Grazie per il vostro aiuto!

Cheers!

Answer 1

Utilizzare tabindex = "- 1" sul "pulsante interno". Ciò impedirà la messa a fuoco. 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:

ho capito c'è un'altra possibile soluzione per il problema mentre si lavora su qualche problema di messa a fuoco della mia. Puoi utilizzare z-index: -1 se l'attenzione di cui hai bisogno deve essere attivata in seguito tramite l'evento javascript.

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

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

che manterrà è attivabile, ma nascosto. E puoi renderlo visibile di nuovo con z-index: 0 dinamicamente.