Нежелательная граница вокруг фонового изображения div

Question

Я получаю небольшую линию или рамку вокруг моего фонового изображения. Я динамически меняю высоту родительского div с помощью javascript, так что внутренний div (который имеет фоновое изображение) будет «вставляться» в нижнюю часть окна.

не появляется строка на настольных браузеров, но на мобильном браузере после запуска скрипта, там, как правило, тонкая рамка вокруг него:

граница находится на левой стороне и так, как это должно быть справа. Какие-либо предложения?

Это сценарий:

<script type="text/javascript"> 
function layoutHandler(){ 
    if(window.innerHeight > 1061){ 
    var newsize = 150 + (window.innerHeight - 1061); 

     document.getElementById("footerwrapper").style.height = newsize+'px'; 
    } 
    else { 
     document.getElementById("footerwrapper").style.height = '150px'; 
    } 
} 
window.onload = layoutHandler; 

window.onresize = layoutHandler; 
layoutHandler(); 
</script> 

И тогда внутренний DIV настроен так:

#inner { 
    background-color: #FFF; 
    padding: 0px; 
    height: 150px; 
    bottom: 0px; 
    width: 100%; 
    position: absolute; 
    background-image: url(Images/grad.png); 
    background-repeat: repeat-x; 
} 

Edit: Хорошо, после тестирования этого немного больше я сузили, когда Бывает. (Это может показаться неудовлетворительным). Это происходит наиболее заметно на iPad в портретном режиме. Я отключил «repeat-x», и он полностью уходит. Это заставило меня попробовать гораздо более широкое фоновое изображение, которое не повторялось бы в пределах ширины iPad, и это убрало эту проблему. Любые идеи, почему это происходит?

Answer 1

У меня была такая же проблема, как и удаление repeat-x. Я думаю, что это ошибка телефонных браузеров.