html - Full screen background shift due to mobile browser interface changing size of window / view-port -

i have background image on website. seems pretty reasonable request.

i want background image in fixed position, content scrolls on top of it. on classic desktop browser, can use background-attachment: fixed, has no affect on small touch screens. instead image scrolls along you.

it great if have position: fixed div background image - accomplish this... there issue 'chrome' or ui these touch/small-screen browsers / changes size of view-port accommodate it's buttons - , again when scroll down + buttons go away , viewport taller. (this not new problem, seems problem ok with.) wondering if i'm missing other option / . i've been trying find way around years.

<div class='background'></div>  .background   background-image: url('some-image.jpg')   position: fixed   top: 0   right: 0   bottom: 0   left: 0 

http://codepen.io/sheriffderek/pen/pbqpwp

debug view phone: http://s.codepen.io/sheriffderek/debug/pbqpwp