CSS Переход Не обновляющий цвет фона при увеличенной высоте

Question

Так просто. У меня есть страница с белым фоном. Когда я нажимаю кнопку, на дисплее div отображается содержимое и фон за тусклыми div. У меня есть тусклый переход на 2 секунды для кино, как эффект.
Работает отлично, когда информация в div не превышает установленную высоту браузера. Однако, если поле div увеличивает высоту браузера, любая часть новой высоты, отображаемая в данный момент пользователю, в то время как переход продолжается, не тускнеет (IE остается белым). Если часть новой высоты находится под окном браузера во время эффекта, и если вы прокрутите вниз, она остановит эту часть перехода окон. В противном случае, если новая часть высоты не будет видна во время перехода, она полностью омрачается.
Похоже, он не может нарисовать изменение фона во время его просмотра, что кажется глупым. Вот мой код:

CSS # тело обратно идентификатор для тела тега

#body-back { 
    -webkit-transition: background 2s ease-in-out; 
    -moz-transition: background 2s ease-in-out; 
    -ms-transition: background 2s ease-in-out; 
    -o-transition: background 2s ease-in-out; 
    transition: background 2s ease-in-out; 
} 

JS

<script> 
pop = function() { 
    var back = document.getElementById('body-back'); 
    back.style.background = "rgba(0,0,0,0.8)"; 
} 
popaway = function() { 
    var back = document.getElementById('body-back'); 
    back.style.background = "rgba(0,0,0,0)"; 
} 

#Show the div box    
$("#button").click(function(e) { 
    e.stopPropagation(); 
    $("#divbox").toggle(); 
    pop(); 
}); 

$("#divbox").on('click',function(e) { 
    e.stopPropagation(); 
}); 

#Hide the div box if user clicks outside of div box 
$(document).on('click', function(e) { 
    if(e.target.id != 'divbox'){ 
    $("#divbox").hide(); 
    popaway(); 
    } 
}); 
</script> 

Также за нотой, когда у меня нет фон на переходном этапе и просто базовый переключатель, он отлично отображает даже любое новое пространство высот браузера. Любые идеи относительно того, почему он не хочет рисовать на открытом пространстве? Спасибо, парни!

Редактировать Я запускаю его в Chrome, но просто попробовал в Safari. Для Safari, даже если новая высота выключена, она по-прежнему не рисует обновленный фон.

Edit 2 - Див Box CSS

.popup { 
    position:absolute; 
    left:0px; 
    margin-left:100px; 
    margin-right:100px; 
    width:85%; 
    font-family:verdana; 
    font-size:13px; 
    padding:10px; 
    background-color:white; 
    border:2px solid grey; 
    z-index:100000000000000000; 
    display:none; 
} 

Answer 1

позицию: абсолютная не будет влиять на высоту родительского элемента. Фиксированная позиция сделает ее сверху сверху, игнорируя прокрутку страницы целиком.

звучит как это работает для вас

.popup { 
    top: 50px; 
    position:fixed; /* sit on top of everything, ignore scrolling on the body*/ 
    overflow:scroll; 
    width:70%; 
} 

по умолчанию тело должно занимать 100% высоты, не уверен, почему это не происходит для вас раньше.

Рад, что это сработало и что я могу помочь в конце!

Answer 2

EDIT: это не решает проблему здесь, (но положить стили в CSS это Generaly хорошая вещь :)

Попробуйте анимировать background- цвет

Этот вопрос explains animating background opacity. Обычно проще ставить все стили в CSS, а не на JavaScript. See this question

.pop{ 
    background-color: rgba(0, 0, 0, 0.8) 
} 

#body-back { 
    //polyfills.. 
    transition: background-color 2s ease-in-out; 

    background-color: rgba(0, 0, 0, 1.0); 
} 

Javascript

pop = function() { 
    $('#body-back').addClass('pop'); 
} 
popaway = function() { 
    $('#body-back').removeClass('pop'); 
}