Почему transform обрезает вложенные элементы?

Question

[marrs]

Всем привет!

Есть код:

<div class="row">
    <div id="nav">
        <div id="mm"></div>
    </div>
</div>

#nav {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transform:translateY(-10px);
    transition: opacity .3s ease-out, transform .3s;
}

в нем дочерний

#mm {
    position: absolute;
    width: 900px
}

а в нем блоки float: left

При .row: hover происходит следующее:

.row: hover > #nav {
    visibility:visible;
    opacity:1;
    height:auto;
    transform:translateY(0)
}

При этом показывается #mm, но обрезан, будто я ему задал width:80px; overflow:hidden.
Без transform работает как надо.
Что за чудо с этим transform, кто знает?

Ну и еще один вопрос, возможно ли честно скрыть блок, для дальнейшей transition анимации (js не предлагать)?
Из display:block анимации не получается, visibility:hidden оставляет блок на странице, visibility:hidden + height:0 по мне так костыль

Comments

[Mr Crabbz]

на codepen выложите живой код.

Answer 1

[DTX]

Ищите проблему в соседних стилях. По предоставленным данным #mm не обрезается:
https://jsfiddle.net/Lp0szw5f/1/

Ну и еще один вопрос, возможно ли честно скрыть блок, для дальнейшей transition анимации (js не предлагать)?

opacity: 0?
Примеры там же