IE pokazuje poziomy pasek przewijania po dom elementem przekształcone

Question

Użyłem następujący CSS w różnych miejscach na mojej stronie:

http://jsfiddle.net/uycq29mt/1/

.a { 
    position:absolute; 
    background:red; 
    width:600px; 
    height:100px; 
    left:50%; 
    transform: translate(-50%); 
} 

Po uruchomieniu programu Internet Explorer, zauważysz poziomego paska przewijania która wydaje się ignorować przekształcenie dotyczące całkowitej szerokości strony.

Answer 1

Istnieje proste rozwiązanie:

http://jsfiddle.net/uycq29mt/2/

.a { 
    position:absolute; 
    background:red; 
    width:600px; 
    height:100px; 
    right:50%; 
    transform: translate(50%); 
} 

Zamiast wysyłać element lewy 50% (w prawo) i przy użyciu transformacji wysłać go w lewo, robię dokładnie odwrotnie. Nigdy nie rozważałem tego do tej pory, ale jeśli umieścisz element skrajnie po lewej stronie, nie wpłynie to na szerokość strony ani pasek przewijania.

dziwne, jeśli nie w pionie równowartość centrowania, dzięki zastosowaniu najwyższej 50% i przetłumaczyć (0px, -50%) nie wydaje się wpływać na pionowy pasek przewijania.

Wygląda na to, że program Internet Explorer nie przelicza granic poziomych, gdy transformacje są używane w ten sposób. Bardzo denerwujące. IE jest do bani.