0

I have a form with a bunch of form fields and as expected, users are able to successfully press the tab key to cycle through each form element in natural order. However, once they reach a particular DIV element (for which I manually had to add a tab-index attribute to make it focusable), although the element is able to get the focus correctly, the contents of the DIV slightly shift up (very similar to what it would have looked like if the following styles were to be applied to the DIV: position: relative and top: -3px). Then when I try to continue tabbing on to other elements and the focus is lost from the DIV, it continues to stay shifted up. I even tried reverse tabbing (SHIFT+TAB), which also doesn't reset the DIV back to its original position. How can I prevent this unwanted shift behavior with either CSS or JS?

P.S. I don't have the actual code snippet to provide here, but I can say that the markup in question is very simple and the DIV content is very straight-forward, without any crazy elements or styles applied to it or any of its children elements).

DecafJava
  • 479
  • 2
  • 7
  • 19
  • 1
    If the code snippet is that straight-forward, can you provide it please? – gvee Jan 17 '14 at 14:15
  • Why would someone want/need to tab to the div? Does it provide a control? Typically people can't tab to divs, and generally don't need to, so I'm confused why that is being done... – AlastairC Jan 17 '14 at 22:46
  • I cannot provide it because I am not at the office, so I don't have direct access to the sourcecode. And yes, the DIV contains further radio button options that a user can select. – DecafJava Jan 18 '14 at 00:01

2 Answers2

0

according to the answer here div's are incompatible with tabindex: Tab Index on div

Community
  • 1
  • 1
Ruben Verschueren
  • 822
  • 13
  • 28
0

I figured it out, folks. It is now fixed in all browsers. It was a very strange one.

The DIV had a light opacity fade in animation applied to it on focus, such that when it would gain focus, it would fade from opacity 0.7 to opacity 1. Turns out that when I took out the opacity fade animation code, this mysterious shifting up on focus bug would disappear!

DecafJava
  • 479
  • 2
  • 7
  • 19