В Firefox, щелчок по абсолютному элементу внутри фокусируемого элемента не фокусирует фокусируемый элемент, если он не имеет позиции CSS

Контекст: абсолютный элемент внутри настраиваемого элемента.

В Firefox 36, если элемент фокусировки не имеет позиции CSS (относительной, фиксированной или абсолютной), щелчок по внутреннему элементу не будет фокусировать внимание на фокусируемом элементе...

Любая идея, является ли это известной ошибкой?

Не воспроизводится на IE11 и Chrome.

Для лучшего понимания проблемы здесь приведен пример:

Codepen

/* this is just so that the squares are similarly displayed */
section {
  position: relative;
  display: inline-block;
  margin-right: 75px;  
}

div {
  background-color: red;
  width: 100px;
  height: 100px;
  color: white;
  padding: 5px;
}

div:focus {
  background-color: green;
}

div > span {
  position: absolute;
  display: inline-block;
  top: 50px;
  left: 50px;
  background-color: blue;
  width: 100px;
  height: 100px;
  padding: 5px;
}

Context: an absolute element inside a focusable element.<br>
In  Firefox 36, if the focusable element does not have a "position: relative", a click on the inside element will not set the focus on the focusable element...<br>
(red block turns green when focused)
<br><br>
Edit: none works in IE
<br><br>

<section>
  <div style="position: relative;" tabindex="-1">
    With position: relative
    <span>
      click here
    </span>
  </div>
</section>

<section>
  <div tabindex="-1">
    With no position
    <span>
      click here
    </span>
  </div>
</section>

Ответ 1

В этом случае событие клика будет запущено, и произойдет распространение события. Таким образом, щелчок по внутреннему элементу будет распространяться на родительский элемент, и родитель получит фокус и стиль будет применен. Подробнее см. Распространение событий распространение событий

Ответ 2

Он воспроизводится во всех браузерах в следующем случае:

<!doctype html>
<html lang="en">
<head>
    <title>Focus</title>
    <style>
    button { display: inline-block; width: 30px; height: 30px; background-color: red; }
    button:focus { background-color:green; }
    span { position: absolute; display:inline-block; width:100px }
    </style>
</head>
<body>
      <button>
        <span tabindex="1">
          click here
    </span>
      </button>
</body>
</html>

И tabindex не может добавить focus из-за следующего:

элемент, который только фокусируется из-за его атрибута tabindex, будет запускать событие click в ответ на активацию без мыши.

Руководства по обеспечению доступности описывают обходной путь как таковой:

Методы обеспечения доступа к скриптам включают следующее:

Разрешить пользователю настраивать пользовательский агент, чтобы обработчики событий mouseover/mouseout активировались (и активировали) события фокуса/размытия. Аналогичным образом, позвольте пользователю использовать командную команду, например enter и Shift-Enter, для запуска событий onclick и ondblclick.

Внедрить "Объектная модель объекта документа (DOM)" События уровня 2 "" События [DOM2EVENTS] с одним событием активации и предоставить метод для запуска этого события с каждым поддерживаемым устройством ввода или API ввода. Они должны совпадать с событиями щелчка и отображениями, приведенными выше (но обратите внимание, что пользовательский агент, который также является редактором, может захотеть использовать события с одним щелчком мыши для перемещения системного каретки и хочет предоставить другое поведение для активации с помощью мыши).

Например, Amaya [AMAYA] использует команду doAction для активации ссылок и элементов формы, которые могут быть активированы либо с помощью мыши (и ее можно установить для однократного или двойного щелчка), либо клавиатуру (можно установить ее для любой клавиши, используя конфигурацию клавиатуры Amaya)

Для авторов: Документируйте эффекты известных важных сценариев, чтобы дать пользователям представление о том, что они делают. Сделайте это, используя соответствующие элементы или атрибуты спецификации (язык разметки), или, если таковые отсутствуют, предоставите описание поведения script.

Кроме того, это поведение не указано:

Псевдо-класс: focus применяется, когда элемент имеет фокус (принимает события клавиатуры или другие формы ввода текста).

Элемент может одновременно совпадать с несколькими псевдоклассами.

CSS не определяет, какие элементы могут находиться в вышеуказанных состояниях, или как вводить и оставлять состояния.

Используйте focusin/focusout polyfill для нормализации поведения кросс-браузера:

function focusPolyfill()
  {
  'use strict';
  
  var w = window,
  d = w.document;

  function addPolyfill(e)
    {
    var 
		type = e.type === 'focus' ? 'focusin' : 'focusout',
		event = new CustomEvent(type, { bubbles:true, cancelable:false });
    event.c1Generated = true;
    e.target.dispatchEvent( event );
    }

  function removePolyfill(e)
    {
    if(!e.c1Generated)
      { 
      // focus after focusin, so chrome will the first time trigger tow times focusin
      d.removeEventListener('focus' ,addPolyfill ,true);
      d.removeEventListener('blur' ,addPolyfill ,true);
      d.removeEventListener('focusin' ,removePolyfill ,true);
      d.removeEventListener('focusout' ,removePolyfill ,true);
      }
	}
	
   function removeHandler()
    {
    d.removeEventListener('focusin' ,removePolyfill ,true);
    d.removeEventListener('focusout' ,removePolyfill ,true);
    }
    
  
  if( w.onfocusin === undefined )
    {
    d.addEventListener('focus' ,addPolyfill ,true);
    d.addEventListener('blur' ,addPolyfill ,true);
    d.addEventListener('focusin' ,removePolyfill ,true);
    d.addEventListener('focusout' ,removePolyfill ,true);
    }
  
  w.setTimeout(removeHandler);
  }

Ответ 3

попробовал тэг <p> и его работу.

div > p{
  display: inline-block;
  top: 50px;
  left: 50px;
  background-color: blue;
  width: 100px;
  height: 100px;
  padding: 5px;
  margin-left:40px;
}

<section>
  <div tabindex="-1">
    With no position
    <p>
      click here
    </p>
  </div>
</section>

link http://codepen.io/anon/pen/MYLeLp