16

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

Gabriel Isenberg
  • 25,869
  • 4
  • 37
  • 58

2 Answers2

19

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

Tomasz Janczuk
  • 3,220
  • 21
  • 19
  • This saved my day! This should be bountied as is the correct answer! Both settings `@-ms-viewport` and `-ms-overflow-style` are the key for getting it working correctly! – DATEx2 Feb 14 '14 at 17:02
  • Thanks a lot! I was confused for hours what has broken my scrolling div when using @-ms-viewport{width:device-width; height:device-height;} and your fix did the trick. But on WP8.1 they have broken `device-` dimensions causing bad gaps and redundant areas ... but that's another story. – JustAMartin Jun 02 '14 at 14:16
  • Adding: -ms-overflow-style: none to my div element already did the trick. Thanks a million, this fixed an issue we've had for a while without us even knowing about it. – erik van nieuwburg Jan 15 '15 at 12:50
1

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;
}
Tarek Wahab
  • 104
  • 3