Текст на этикетке Не раздвигается при нажатии

Question

У меня есть слайдер аккордеона. У меня проблема с текстом метки слайдера, который не сдвигается при нажатии. Here is the URL to my site.

CSS для текста:

.accordion label h7{ 
position: absolute; 
cursor:pointer; 
display: block; 
-webkit-backface-visibility: hidden; /* fixes chrome bug */ 
-webkit-transform: translateX(-100%) rotate(-90deg); 
-webkit-transform-origin: right top; 
-moz-transform: translateX(-100%) rotate(-90deg); 
-moz-transform-origin: right top; 
-o-transform: translateX(-100%) rotate(-90deg); 
-o-transform-origin: right top; 
transform: translateX(-100%) rotate(-90deg); 
transform-origin: right top; 
} 

Что мне не хватает? Их способ сделать слайдер слайдера с небольшим секундным отставанием?

Answer 1

Проблема в том, что .accordion label h7 установлен в position:absolute. Если вы удалите это, вы заметите, что текст начинает скользить.

Исправление, которое я нашел для полученного сгруппированного текста, - это установить ширину в .accordion label h7.

.accordion label h7 { 
    width: 200px; 
} 

Answer 2

Текст скользящий, но он не обновляется. Как только некоторые свойства CSS изменяются, текст переходит в правильное положение. Поэтому, возможно, попробуйте изменить свойство CSS, прежде чем начинать оживлять текст и удалять его снова после завершения анимации (что-то вроде пограничного цвета, который никто никогда не увидит). (Relevant SO question)