locked
Strange scrolling behaviour

    Question

  • This is actually a C# displaying a full screen webview, but it's an HTML rendering problem so this is probably the correct forum.  Also it's on a Surface RT.

    I have a page where there's a main content panel on top of two side panels, as in overlayed so they aren't visible.  The panels are displayed using transform: translateX(200px).  That's all working and it isn't the problem.

    This issue is when there's an element with overflow-x: scroll set, I can also scroll the parent element in 64px increments that freeze when I let go.

    Also this only happens in a webview, not in IE Metro.

    It's kind of difficult to explain verbally so I made a youtube video.

    https://www.youtube.com/watch?v=l3PhALy6r1c

    Tuesday, April 29, 2014 5:27 PM

Answers

  • Hi wmill,

    Make sure that when you translateX(200px) that you also reduce the width of your content panel by 200px.  I'm guessing that the reason why you are not able to scroll is because the windows doesn't have overflow-x.  It may seem like there should be an overflow-x because the rest of the content panel is hidden on the right side of the screen when you translate-x but if the content panel's width is the same as before it was translated, then it doesn't really have a scroll-x.  You can resolve this by either reducing the width of the content panel when you call for translate-x or by enabling overflow on the parent windows of the content panel.

    Hope you get to fix it.  Your app looks cool.  I have similar implementation on mine, check it out http://youtu.be/YIg21ymFSa4

    Wednesday, April 30, 2014 4:58 AM