Не уверен, если градиенты ошибка на Chrome или что-то не так в моем коде

Точно. То, что написано в названии.

Я использую проверенный на входе Хак, чтобы сделать выпадающее меню видимым при нажатии кнопки со стрелкой. Затем его можно снова закрыть, нажав на крестик. "Кнопка" - это промежуток внутри этикетки. Html выглядит следующим образом:

    <div>
        <input id="pubs" type="checkbox">
        <label for="pubs" onclick><span></span></label>
        <h3>Pubs</h3>

        <ul>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </div>

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

div {
    background-image: linear-gradient(yellow 4em, transparent 4em);
    background-size: 100%;
}

Где 4em-высота видимой области. Если вы открываете Chrome и копируете и вставляете этот код в эту галерею шаблонов CSS, он работает. Однако это не работает при реализации click & show; вещь кажется прозрачной и только при нажатии кнопки со стрелкой появляется желтый фон. Проверьте демо-версия. Откройте его в FF, а затем в Chrome, чтобы понимаете, что я имею в виду?

Я не уверен, в чем проблема, и я даже сошел с ума с префиксами поставщиков, чтобы заставить его работать, но потерпел неудачу. Можете ли вы воспроизвести проблему? У кого-нибудь есть хоть малейшее представление о том, что происходит? У меня закончились идеи.

Ура!