«снизу» не работает в Крае

Question

У меня есть следующий HTML:

.arrow { 
 
    width: 50px; 
 
    position: fixed; 
 
} 
 
.arrow.arrow-right { 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    right: 15px; 
 
} 
 
.arrow.arrow-bottom { 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    bottom: 15px; 
 
    transform: rotate(90deg); 
 
}

<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-bottom" /> 
 
<img src="http://bestanimations.com/Signs&Shapes/Arrows/Left/left-arrow-15.gif" class="arrow arrow-right" />

И я ожидаю, что первая стрелка появляться возле правого края экрана, а вторая один рядом с нижней частью экрана.

Это именно то, что происходит в Chrome, Firefox и Opera:

В Краю, кажется, что 'дно' правило только .. игнорируется:

Почему это происходит?

Fiddle

Answer 1

Просто измените на следующее:

.arrow.arrow-bottom { 
    left: 0; 
    right: 0; 
    margin: 0 auto; /* instead of auto */ 
    bottom: 15px; 
    transform: rotate(90deg); 
} 

margin: auto была причиной проблемы. Пожалуйста, дайте мне знать, если он решит проблему или нет.