Wonder if anyone has any ideas how how this issue can be solved.
I have a layout like this at present:
http://codepen.io/rctneil/pen/tkrKC (For full browser demo use http://codepen.io/rctneil/full/tkrKC)
This works fine on desktop and on the iPad.
However, I have an item which is a style image which I need to position outside of the header to the right. I have set the following styles on it:
background: transparent url('images/item.svg') no-repeat left top
background-size: 100% 100%
However, This works perfectly on a desktop browser as expected but on the iPad it's in the correct place but is still visible when it should not be. The iPad has zoomed out to accomodate the extra wide elements.
I have tried several meta viewports widths and scales and nothing seems able to solve it.
I basically want the viewport to ignore that item so wide browsers will see it and narrower ones will not due to this being purely decorative. I also cannot put it as part of the background image for other reasons.