Div overflow scrolling when -ms-viewport is specified?

Question

Working on a page that is viewed in Windows Phone 8, and I noticed an odd behavior. When -ms-viewport is specified with a width or height, then it seems like users can no longer use the touch scrolling behaviors on an overflow:auto or -ms-touch-move:pan-y element.

Anyone encounter this behavior, or aware of any workarounds?

edit: Visit this URL on a WP8 device for a repro: http://fiddle.jshell.net/Vk7SR/3/show/light

Answer 1

Setting the @-ms-viewport { width: auto } may not be acceptable for a number of applications that aspire to present a reactive UI on Windows Phone devices. A working alternative that allows you to set whatever viewport width you desire is to set the following CSS rule:

body, html { 
  -ms-overflow-style: none !important; 
}

I copied the original repro and fix it up with this rule at https://gist.github.com/tjanczuk/7419485. You can also navigate directly to the HTML page with the fix from a Windows Phone device at http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html

Answer 2

Setting the width to auto (like below) instead of device-width seems to solve the scrolling issue. I took the source from your page(http://fiddle.jshell.net/Vk7SR/3/show/light/), packaged it as a WP8 app and tried on a Lumia 920.

@-ms-viewport {
    width: auto;
}