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'>
    <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>
    Works in IE breaks in Moz and Chrome.  Hover to test.
</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{
    /*transforms OK*/
	float: right;
}
.procedure .timestamp{
    /*transforms OK*/
	position: absolute;
	left: 0;
}
/* All UNPOSITIONED spans do not transform properly!!*/
.report .context{
	padding-left: 2em;
}
/* format the wrappers***********************************/
.container > .procedure{
	padding-left: 6.5em;
}
.procedure{
	list-style: none;
	padding-left: 2em;
}
.procedure li{
    outline-offset: -2px;
	margin: 0;
	list-style: none;
	display: list-item;
	padding-top: 0; padding-bottom: 0;
}
.procedure li span{
	background-color:rgba(171, 171, 171,0.5);
	position: relative;
    line-height: normal;
	margin: 0;
	padding-top: 0; padding-bottom: 0;
}
/* toggle display type for spans***********************************/
.container:before{
    padding: 3px;
    position: relative;
    top: 0; left: 0;
    display: inline-block;
    outline: 2px solid red;
}
.container[mode='in-line']:before{
	content: 'inline-block: works fine ...click to change';
}
.container[mode='list']:before{
	content: 'normal span: BROKEN ...click to change';
    color: red;
}
/*This is the target property to be switched*/
.container[mode='in-line'] .procedure span {
/*  rotation breaks without this display setting */
    display: inline-block;    
}

/* manage pinned or un-pinned for the li***********************************/
.procedure > li,
.procedure > li span{
	transition: all 0.5s ease-in;
}
.procedure[pinned='closed'] > li {
    /*adjust line spacing comensurate with span rotate X*/
    max-height: 0.25em;    
}
.procedure[pinned='closed'] > li span {
    color: rgba(0,0,0,0.3);
	/*Rotate X - hide*/
    transform: rotateX(-85deg) skewX(30deg);    
}
/* dynamic...

JavaScript

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

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

        // private members
        var collabsableLists = domain.getElementsByClassName(className),
            list;

        // 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
                        while (t.tagName !== 'UL' &&...