Chrome/webkit не отображает изменение отображения css на входе: checked + element + element

Сценарий

У меня есть селектор CSS, который должен отображать суб-контент при нажатии метки. Селектор расположен по строкам input:checked + element + element, давая этому окончательному элементу отображение блока (по умолчанию - нет). Проблема в том, что он работает во всех основных браузерах, за исключением webkit. Chrome, Safari и мобильный браузер для Android (v2.2 извините, я отстаю от времени), все не отображают элемент. Когда я проверяю элемент в Chrome, он показывает, что он должен быть display: block, но он не отображает его. Я могу отключить и проверить свойство в инструментах разработчика, и он отображается, но не раньше.

Я предполагаю, что это ошибка в webkit.

Вопрос

Вот многочастный вопрос: это известная ошибка в webkit? Я что-то делаю с моими селекторами? И как я могу обойти проблему для веб-браузеров (любые творческие предложения)?

код

HTML

  <input id="c1" type="checkbox">
  <label for="c1">Ein</label>
  <section>Content</section>

  <input id="c2" type="checkbox">
  <label for="c2">Zwei</label>
  <section>Content</section>

  <input id="c3" type="checkbox">
  <label for="c3">Drei</label>
  <section>Content</section>

CSS

input {
  float:left;
  clear:left;
  visibility: hidden;
  position:absolute;
}

label {
  color:green;
  display:block;
  cursor:pointer;
}

section {
  display:none;
}

label:after {
  content:" +";
}

input:checked + label:after {
  content:" -";
}

input:checked + label + section {
  display:block;
}

Demo

Демо: http://jsbin.com/epibin/2
Источник: http://jsbin.com/epibin/2/edit

Ответ 1

Chain A Pseudo-Class

Это демонстрирует, что этот код исправляет ошибку (обратите внимание, что nth-child(n) соответствует любому элементу, но добавление его в цепочку заставляет его работать):

input:checked + label:nth-child(n) + section {
  display:block;
}

Ответ 2

@ScottS обеспечивает надежное решение. Еще один возможный, который работал у меня и имел больше смысла от посторонних "почему, черт возьми, они делают эту" точку зрения:

input:checked ~ section {
  display:block;
}

который выбирает каждый "раздел", который приходит после, и являются братьями и сестрами "input: checked".

Есть два условия, я могу думать о том, где версия @ScottS превосходит, потому что элемент в позиции "label" также выбирается в моем решении: (1) "входной сиблинг № 1 и № 2 - это те же элементы (вместо" label "и" section ") (2) вы пытаетесь быть общими с помощью селектора "*".

Ответ 3

звучит как совпадение с Ошибка 45168 - множественная селекторная последовательность с несколькими соседними CSS игнорируется, если префикс с селектором псевдокласса

если вы поменяете структуру <label> и <input> в разметке (и соответственно настройте CSS), она работает.

http://jsbin.com/epibin/10/edit

(но теперь + - не переключаться)

EDIT:

размещение <label> и <section> в контейнере div: http://jsbin.com/epibin/12/edit

Ответ 4

Как mdmullinax состояния, это выдающаяся ошибка в хроме.

Этот хак работал у меня по ссылке в принятом ответе:

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }