Переход CSS, не работающий на высоту процента?

У меня есть следующие определения CSS:

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

Они применяются к отделению с некоторым содержанием в нем.

У меня также есть некоторый JavaScript, что, когда отделение нажато, оно изменяет имя класса на элементе. Это хорошо работает для того, чтобы развернуть и свернуть, но на iPhone нет никакой анимации? (Все другие переходы, которые я попробовал, хорошо работают с жидкой анимацией), Какие-либо идеи?