Wie kann ich sagen (zu Testzwecken) Wenn die Hardwarebeschleunigung für eine CSS-Animation aktiviert wurde?

Ich habe den folgenden Code, der ein Element im Wesentlichen vergrößert und zum Vollbild macht (ohne die HTML5-Vollbild-API zu verwenden). Wenn ich eine jQuery-Animation verwende, läuft es auf den meisten Handys wie eine stotternde asthmatische Schildkröte. Deshalb habe ich stattdessen CSS3 verwendet.

Hier ist das jsFiddle-Beispiel:

$("#makeFullscreen").on("click", function() {        
			
    var map = $("#map"),
        mapTop = map.offset().top,
        mapLeft = map.offset().left;
    
    $("#map").css({
        "position": "fixed",
        "top": mapTop,
        "left": mapLeft,
        "width": map.outerWidth(true),
        "height": map.outerHeight(true)
    });
    
    setTimeout(function(){map.addClass("fullscreen")},1);
    
    return false;        
});

.mapContainer {    
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
}

.map {  
    background: #00f;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}
.fullscreen {
    -webkit-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -moz-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -ms-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    -o-transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    transition: top 300ms ease-out, height 300ms ease-out, left 300ms ease-out, width 300ms ease-out;
    
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    
    top: 0 !important;
    left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

#makeFullscreen {
    margin-top: 20px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mapContainer">
    <div id="map" class="map">
        <button id="makeFullscreen">Make Fullscreen</button> 
    </div>
</div>

Dies fügt eine Klasse hinzu und das Element wechselt mithilfe eines CSS-Übergangs von einem Zustand zum nächsten. Dies ist schneller als jQuery, stottert aber immer noch unter iOS und Android.

Aber ich leseHie dass Sie die Beschleunigung des Übergangs mithilfe der GPU erzwingen können, indem Sie eine 3D-Transformation angeben, die im Wesentlichen nichts bewirkt:

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

Nachdem ich das zu meinem CSS hinzugefügt habe, sehe ich keine visuelle Verbesserung.

Die Frage dann ...

Gibt es eine Möglichkeit, festzustellen, ob die Hardwarebeschleunigung in einem Browser über die Entwicklungstools aktiviert wurde? Ich muss dies nicht mit einem Skript erkennen, sondern möchte es nur zu Testzwecken wissen.