Material Design Lite Пример меню из двух столбцов - не работает в Chrome

Question

Привет, ребята, есть пример (с помощью css переопределяет, если необходимо), как иметь меню с двумя столбцами?

Я пытаюсь сделать следующее:

<span id="menu-lower-left" class="select-category"><span>Select a category</span></span> 
     <ul class="category-list mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" 
      for="menu-lower-left"> 
     <li class="mdl-menu__item">Some Action</li> 
     <li class="mdl-menu__item">Another Action</li> 
     <li class="mdl-menu__item">Additional Action</li> 
     <li class="mdl-menu__item">Yet Another Action</li> 
     </ul> 

CSS выглядит следующим образом: `

.category-list { 
    list-style-type: disc; 
    columns: 2; 
    -webkit-columns: 2; 
    -moz-columns: 2; 
    list-style-position: inside; 
    } 

` Когда я пытаюсь просто добавить 2 колонки, он работает, но мои пункты списка исчезают!

Любая идея, почему это происходит? Вот Plunker, который демонстрирует проблему:

http://plnkr.co/edit/d9nNB7jg4W8nsGzdlnC4

Answer 1

Казалось бы, что есть ошибка в Chrome, где переходы и преобразования могут сделать вещи исчезают в макетах несколько колонок. Использование трюка от this ответ исправляет его. Вот обновленный Plunker: http://plnkr.co/edit/st2RmkNbcJqTVaQG3Fna?p=preview Я только необходимо добавить одну вещь, чтобы ваш CSS

.mdl-menu__item { 
    transform: translateZ(0); 
    }