Borde no deseado alrededor de la imagen de fondo div

Obtengo una ligera línea o borde alrededor de mi imagen de fondo. Estoy cambiando dinámicamente la altura del div principal a través de javascript para que el div interno (que tiene la imagen de fondo establecida) se “pegue” en la parte inferior de la ventana.

No aparece ninguna línea en los navegadores de escritorio, pero en el navegador móvil después de que se ejecuta el script, generalmente hay un borde delgado alrededor de él:

enter image description here

El borde está a la izquierda y la forma en que debería estar está a la derecha. ¿Alguna sugerencia?

Este es el guion:

 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();  

Y luego el div interno está configurado así:

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

Editar: Bien, después de probar esto un poco más, lo reduje cuando sucede. (Esto puede ser frustrantemente específico) Sucede más notablemente en el iPad en modo retrato. Apagué el “repeat-x” y se va completamente. Eso me llevó a probar una imagen de fondo mucho más amplia que no se repetiría dentro del ancho del iPad y me quitó este problema. ¿Alguna idea de por qué diablos sucede esto?

Tuve el mismo problema y la eliminación de repeat-x resolvió. Creo que es un error de los navegadores de teléfonos.