Firefox translate3d vermasselt mit Select-Eingang

Question

Ich entwerfe eine Website basierend auf einem Thema, das translate3d verwendet, was mit dem Dropdown-Fenster zu tun hat.

<select> 
    <option value="Biały">Biały</option> 
    <option value="Czarny">Czarny</option> 
    <option value="Czerwony">Czerwony</option> 
    <option value="Żółty">Żółty</option> 
</select> 

Grundsätzlich, wenn ich die Liste in Firefox öffnen, ist die ganze Liste auf die wie folgt nach links verschoben:

EDIT ---------- -------- hinzugefügt JSBin klicken Sie auf die Registerkarte Info

Answer 1

Ich bin mir nicht sicher, das ist, was Sie suchen, aber das Root-Problem ist nicht das Drehen selbst. Es ist, dass der Container eine Transformation hat. Diese Transformation kann völlig unnötig sein. Anstatt eine Transformation zu verwenden, können Sie die absolute Positionierung ersetzen. Sie tun müssen, um so mit dem folgenden:

#spaces-main{ 
    transform: none!important; 
    position: absolute; 
    left: 240px; 
    right: 0; 
    width: auto; 
} 

Eine horizontalen Bildlaufleiste auf der Original-Demo und meine Version scheint zu erscheinen, so fügte ich dies auch

body{ 
    overflow-x:hidden; 
} 

Der Nachteil ist, dass als Reaktion benötigt angepasst und ein oder mehrere Übergänge funktionieren möglicherweise nicht wie ursprünglich. In jedem Fall ist hier eine Demo mit dem Dropdown-Menü jetzt richtig funktioniert.

http://jsbin.com/karinajalu/1/edit?html,output

Anstelle dieser Lösung könnten Sie erwägen, eine styleable Drop-Down-Plugin hinzufügen. Es würde wahrscheinlich nicht das gleiche Problem auftreten und es würde sowohl netter als auch konsistenter über verschiedene Browser hinweg sein. Ich habe keine Empfehlungen, welches Plugin zu verwenden ist.