Javascript function based on viewport visibility works on desktop but not on smartphones?

Question

I'm having trouble with some Javascript I used for a site. The aim was to have a header elements css changes based on the appearance on screen of a specific div. Actually it works just perfectly on desktop ! But not on Iphones... I can't figure out what's wrong with it... Can you help me understand this ? Thanks alotlotlot !

var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};
var section_clouds = document.querySelector('#section_intro_clouds');
window.addEventListener('transitionend', function (event) {
    if (isInViewport(section_clouds)) {
        document.getElementById('header_blanc').classList.add('colorer_bleu');}
else {document.getElementById('header_blanc').classList.remove('colorer_bleu');}
}, false);