li span rotate problem and line height

Rotate X transform on spans will complete and then revert to un-transformed state in Webkit and Moz but works in IE11

by CoolBlue

HTML

<div class="container collaspableList" mode='list'>Works in IE breaks in Moz and Chrome.  Hover to test.
    <ul class="procedure" pinned="closed">
        <li class="report">
            <span class="timestamp">11:46:01:377</span>
            <span class="caller">caller</span>
            <span class="context">START</span>
            <span class="message">message</span>
            <span class="dt">time</span>
        </li>
    </ul>
</div>

CSS

.container {
	width: 80%;
	outline: 4px solid yellow;
	outline-offset: 2px;
	position: relative;
    padding-bottom: 4px;
	perspective: 2000px;
}
ul:hover{
	cursor: default;
}
/*Set a few different display types for the inner spans**********************/
.procedure .dt{
	float: right;
}
.procedure .timestamp{
	position: absolute;
	left: 0;
}
.report .context{
	padding-left: 2em;
}
.procedure span{
	background-color:rgba(171, 171, 171,0.5);
	position: relative;
    line-height: normal;
	margin: 0;
	padding-top: 0; padding-bottom: 0;
}
/* format the wrappers***********************************/
.procedure{
	list-style: none;
	padding-left: 2em;
}
.container > .procedure{
	padding-left: 6.5em;
}
.procedure li{
    outline-offset: -2px;
	margin: 0;
	list-style: none;
	display: list-item;
	padding-top: 0; padding-bottom: 0;
}

/* toggle display type for spans***********************************/
.container:after{
    position: absolute;
    bottom: 0; left: 0;
    display: none;
}
.container[mode='in-line']:after{
	content: 'inline-block click to change';
    display: block;
}
.container[mode='list']:after{
	content: 'normal span click to change';
    display: block;
    color: red;
}
.container[mode='in-line'] .procedure span {
/*  rotation does not work without this display setting */
    display: inline-block;    
}

/* manage pinned or un-pinned for the li***********************************/
ul.procedure[pinned='closed'] > li {
    max-height: 0.25em;    
	transition: max-height 0.5s ease-in;
}
ul.procedure[pinned='closed'] > li span {
    opacity: 0.3;
    filter: opacity(30%);    
    transform: rotateX(-85deg) skewX(30deg);    
    transition: all 0.5s ease-in;
}

/* dynamic elements***********************************/
div.collaspableList:hover ul.procedure > li{
	background-color:aqua;
    /*adjust line spacing comensurate with span rotate X*/
    max-height: 1.15em;
}
div.collaspableList:hover ul.procedure > li span{
	background-color:aqua;
	/*Rotate X...

JavaScript

(function () {
    window.addEventListener('load', initCollabsableList, false)

    function initCollabsableList() {
        className = 'collaspableList';
        domain = document;

        // private members
        var collabsableLists = domain.getElementsByClassName(className),
            list;
        alert(collabsableLists.length);
        // Set event listeners and bind DOM elements and callback closure
        for (var i = 0, list = collabsableLists[i];
                i < collabsableLists.length; list = collabsableLists[++i]) {
            list.addEventListener('click', eventHandler, false);

        } //for

        //callback closure
        function eventHandler(e) {
            var listEvent = {
                e: e,
                click: function c(p) {
                    // Hack for testing...
                    if (classSelect(p, 'container')){
                        toggleDisplay(p,'mode', 'in-line', 'list')
                    }else{
                        toggleDisplay(p)
                    }
                },
                qualifiedTarget: function qT() {
                    // Return the target element if it qualifies
                    // The element must be a '.report, .report > '
                    // Add container
                    // If not then exit null.
                    // Otherwise return this.
                    var t = this.e.target;
                    if (classSelect(t, 'container') || classSelect(t, 'report') ||
                        classSelect(t.parentNode, 'report')) {
                        return this
                    } else {
                        return null
                    }
                },
                parentProcedure: function pP() {
                    //  Must be UL tag
                    //  Check for qualified input if chained
                    if (this) {
                        //  Find the nearest UL parent
                        var t = this.e.target
                    ...