IE/Edge wendet keine Transformation an: translate to table Zeile

Question

Beim Hinzufügen einer CSS-Umwandlung wie transform:translate(0px, -45px) in eine Tabellenzeile wird die Umwandlung von Internet Explorer (getestet 10 und 11) und Microsoft Edge nicht korrekt angezeigt.

einig einfachen Code als Beispiel:

<table style="width:500px;"> 
    <tbody> 
     <tr style="height: 30px; background-color:red; color:white;"> 
      <td>1</td> 
     </tr> 
     <tr style="height: 30px; background-color:blue; color:white;"> 
      <td>2</td> 
     </tr> 
     <tr style="height: 30px; background-color:yellow; color:black; transform:translate(0, -45px);"> 
      <td>3</td> 
     </tr> 
    </tbody> 
</table> 

This screenshot zeigt das Problem: Zeile 3 sollte auf der Oberseite der Reihen 1 und 2, jedoch in IE/Kante positioniert werden, hat es sich nicht bewegt. Fast jeder andere moderne Browser verhält sich wie erwartet. Microsoft stellt fest, dass IE 10+ und Edge die Transformation (ohne Präfix) unterstützen sollten, und basierend auf dem Standard werden Elemente mit der Tabellenzeile display unterstützt.

Hat jemand eine Ahnung, warum das nicht funktioniert?

Answer 1

Als defined in the spec, transformierbaren-Elemente enthält Elemente, deren display Eigenschaft berechnet auf table-row. Von daher erwarten Sie, dass transform Tabellenzeilen auf dem Bildschirm verschieben. Microsoft Edge scheint diese Unterstützung zu fehlen.

Edge does jedoch übersetzt Tabellenzellen. Dies kann vorübergehend eine vorübergehende Erleichterung bringen. Ich gehe zu work up a few tests, um sicherzustellen, dass wir diese Funktionalität genau implementieren.

Answer 2

Ja, ich habe das gleiche Problem. Sie können die tr Anzeige machen: Block aber ... das wird Ihren Tisch zerstören. Lassen Sie uns hoffen, dass Microsoft so schnell damit umgehen wird.