-ms-content-zooming and content centering RRS feed

  • Question

  • Hi, 

    I'm doing a Metro app for Windows 8. One of its main components  is a high-resulution image viewer. Conceptually, I want to show a bird's eye view of the image and then allow the user to zoom in and pan the image. 

    Using "overflow: scroll;-ms-content-zooming: zoom;" takes care of most of use cases. I also set the zoom boundaries between 10% and 300%. For the initial zoom factor, I have to resort to Javascript (document.querySelector(".container").msContentZoomFactor = .1;).

    I just can't center the image on its container. Something ms-content-zooming does prevents me from using my usual CSS bag of tricks to center the element. 

    Any clues? 

    Thanks in advance.

    Tuesday, February 14, 2012 3:27 PM

All replies

  • Hi Pedro,

    What normally would you use in CSS to center this and what is broken?  Can you post an example?


    Jeff Sanders (MSFT)

    Wednesday, February 15, 2012 3:40 PM
  • Hi Jeff,

    My document can be summarized as a plain IMG inside a DIV with a text-align set to center. Setting content-zooming to none, it appears OK. Setting content-zooming to zoom and the image is moved to the upper left corner. I can drag and zoom the image at will, but when I stop gesture the image is back the the origin at the last zoom level.

    I'd like to show the image zoomed-out , centered on my viewport and allow the user to pan and zoom at will. When zoom factor >= 1 it works great.


    Friday, February 17, 2012 5:40 PM
  • OK Pedro,

    I will put together some HTML and try this myself.  By the way, is this unique to hosting in Metro style apps or can you repro this in IE 10 and other browsers (obviously without the ms prefix)?


    Jeff Sanders (MSFT)

    Friday, February 17, 2012 6:49 PM
  • Hi Jeff, 

    I tried to replicate this in IE10 to no avail. It seems to me I can only use the -ms-zoom prefix on a metro app: outside the app the normal browser zooming behaviour sets in and I could not cancel it.

    I did a little test on http://3e4.wo.sl.pt . This is very similar to what I have on my metro app.

    Tuesday, February 21, 2012 7:08 PM
  • Hi Petro,

    After looking at your web example, I apparently do not understand the problem.  Can you post a very simple repro of the problem here?  Just use a blank WWA app and show the code you added and expected behavior.


    Jeff Sanders (MSFT)

    Monday, February 27, 2012 4:12 PM