Sensei

Это не баг.

По спеке, я так понимаю, есть такое понятие как Canvas, область, на которой происходит рендеринг.

Этот холст имеет размеры области просмотра и берет фон у элемента HTML.

А элемент  HTML, если у него не задан фон, берет его у элемента BODY.

Вот и получается, что фон на весь экран.

По спецификации алгоритм такой

- преобразовываем выражение к значению Boolean
- если результат равен true возвращаем false
- возвращаем true


Можно представить в виде функции

var not = function(expr) {  expr = !!expr;    if (expr === true) return false;    return true;  };not(1 > 2);   // truenot(1 < 2);   // false

Свойство offsetWidth берется у мячика, а не у поля.

Есть событие ended

https://jsfiddle.net/exacjuvc/

Если у элемента позиционирование отличное от static и задан z-index, формируется новый контекст наложения, в котором этот элемент будет корневым.
Контекст, как стакан, дном которого служит корневой элемент, а все дочерние элементы располагаются внутри этого стакана в определенном порядке.
Элементы даже с отрицательным z-index не могут быть расположены за корневым элементом, и лежат на самом дне стакана.

В общем, нужно убрать у ссылок z-index

ul a {   z-index: auto;}

А так?

function layers_box_open(o) {  var item = $(o),      _id = item.attr('data-layersLink-key');      if (_id) {	      var target = $('.js-layers_key-' + _id + ' .layers_box'),          top = item.offset().top - $(".js-layers_wrap").offset().top,          shift = target.outerHeight() / 2 - item.outerHeight() / 2;            $('.layers_box_wrap', '.js-layers_key-' + _id).css({        'visibility':'visible',        'top' : top + 'px',        'margin-top': '-' + shift + 'px'      });        }}

Странно, я свой код запускаю в консоли, и блоки по центру пункта появляются.

Так решилась проблема-то?

высчитываем разницу между высотой блоков, и приподнимаем всплывающий блок на на половину разницы

Тултип же должен позиционироваться относительно пункта, а не всего списка)

Попробуйте так

function layers_box_open(o) {  var _id = $(o).attr('data-layersLink-key');      if (_id) {	      var target = $('.js-layers_key-' + _id + ' .layers_box'),          top = ($("[data-layersLink-key='"+_id+"']").offset().top - $(".js-layers_wrap").offset().top),          shift = target.outerHeight() / 2 - o.outerHeight() / 2;            $('.layers_box_wrap', '.js-layers_key-' + _id).css({        'visibility':'visible',        'top' : top + 'px',        'margin-top': '-' + shift + 'px'      });        }}

А вообще, если есть возможность менять разметку, лучше перенести тултипы внутрь самих пунктов.

Код заметно упростится, нужно будет только отрицательный верхний отступ скриптом выставлять.

А если не нужен ие8, то вообще одними стилями можно будет обойтись.

Кое-кто может взять с полки банан, если продолжит в том же духе вести диалог =)

Ну, или как минимум не получить помощи на этом форуме.

Наверное, имелось в виду «автоматизировать» 

Покажите ваш код.

Так? http://jsfiddle.net/rgv9n1k4/

Точку с запятой уберите из условия цикла.

Увеличиваете индекс до обращения к массиву.

Соответственно, элемент с индексом ноль выведен не будет.

http://jsfiddle.net/Lrhwmfps/1/

Вот такая замечательная особенность флекса)

http://www.w3.org/TR/css-flexbox/#main-alignment

Так сойдёт? http://jsfiddle.net/w1yesyq5/

http://codepen.io/anon/pen/PPybbE

Можно скомбинировать.

Вот, например, модуль для «ноды» https://www.npmjs.com/package/group-css-media-queries

Или для систем сборки

https://www.npmjs.com/package/gulp-combine-media-queries

https://www.npmjs.com/package/grunt-combine-media-queries

Предпоследний абзац этого раздела http://www.w3.org/TR/css3-box/#overflow

Можно с помощью js это проверить http://jsfiddle.net/t3oehygk/

По спецификации такая комбинация некорректна, поэтому значение «visible» игнорируется и меняется на «auto».

Как вариант, можно использовать дополнительный элемент http://jsfiddle.net/5g9c3uxj/

http://jsfiddle.net/ko542jer/2/

В статье «display: inline;» описывается как альтернатива «float» в случае, когда высота элементов может быть разной.

Воспринимайте эту часть статьи как примечание.

В вашем случае указание свойства «display» не имеет никакого смысла.

Если у элемента задано «float», то он становится блочным, даже если вы явно указываете другое.

В общем, уберите «float», и элементы станут строчными.