CSS transition animation performs differently depending on whether “top” or “bottom” is defined. Any workarounds?

Keywords: html css

Question: 

I'm experiencing this is in Firefox 67.0 (64 bit) on Ubuntu 18.04.

If an element's location is defined using "top: Xpx;", a transition from one height to another behaves such that the background "rolls out", and the text fades in with it. In the case of "bottom: Xpx;", both the background as well as the text "rolls out".

I do not have a preference for which animation is actually performed, I just want them to be consistent.

Any ideas for workarounds? I could just define the location using something else, but I wanted to ask the pros if there's an easier way. Perhaps another parameter I could use or specify. Thanks all

<html>
<style>
#J .extend_down{
    position: absolute;
    padding: 5px 5px 5px 10px;
    width: 55px;
    max-height: 0px;
    left: -75%;
    top: 110%;
}
#J .extend_up{
    position: absolute;
    padding: 5px 5px 5px 10px;
    width: 55px;
    max-height: 0px;
    left: -75%;
    bottom: 100%;
}
#J:hover .extend_up{
    visibility: visible;
    opacity: 1;
    max-height: 225px;
}
#J:hover .extend_down{
    visibility: visible;
    opacity: 1;
    max-height: 300px;
}
</style>
<body>
    <li id="J"><a href="#">J</a>
        <ul class="extend_up">
            <li>P</li>
            <li>R</li>
            <li>O</li>
        </ul>
        <ul class="extend_down">
            <li>E</li>
            <li>C</li>
            <li>T</li>
            <li>S</li>
        </ul>
    </li>
</body>
</html>

Answers: