ascott1/bigSlide.js

Different Behavior in Android Webview vs Desktop and Mobile Browsers

joelcdoyle opened this issue · 5 comments

joelcdoyle commented

Hello, I have also created a StackOverflow issue with pictures to better describe this issue: http://stackoverflow.com/questions/40621002/bigslide-js-off-screen-menu-android-webview-fixed-header

I've run into an odd issue where my off-canvas menu behaves differently in an Android webview when compared to a desktop browser, mobile browser, and even the iOS webview component.

For some reason, any elements that have position: fixed styling are not pushed over when bigSlide does it's thing. They stay fixed in place while the rest of the content (body content and off-screen menu) behave normally. I can only reproduce this in an Android app running the webpage inside a webview. iOS is fine, mobile browsers are fine, desktop browser (yep, even IE) are all normal.

I don't know the exact SDK version that was used to build the app, but it was built within the last year using the latest SDK at the time.

<html>
  <body class="push"> <!-- bigSlide pushes the entire body to left-->
    <nav class="off-screen"> <!-- this is the offscreen menu, normally hidden --> 
      <ul>...</ul>
    </nav>
    <div id="main-content"> <!-- body content -->
      <header></header> <!-- fixed position to prevent scrolling -->
      <sub-header></sub-header> <!-- fixed position to prevent scrolling -->
    </div>
  </body>
</html>

.off-screen {
  position: fixed;
  right: -15.625em;
  width: 15.625em;
  overflow: auto;
}

The header and sub-header elements do not get pushed over in Android, but they get pushed over in browsers and iOS webview.

I am using bigSlide.js v0.12.0

ascott1 commented

Thanks for the report @joelcdoyle. What version of Android are you seeing this behavior in? And this is in an application web view? Is the result the same in the default Android browser and Chrome?

Thank you!

joelcdoyle commented

This is Android 4.4.2, and yes this is an application web view. The Chrome browser on the device works fine. The default Android browser 😊 I can't even get to load my website, so I'm having trouble testing there.

However, I'm starting to get the feeling that the default browser will have similar issues. I think it's safe to say that the problem lies there, and definitely not with the implementation of biSlide.js. Therefore, I'm closing this ticket.

I believe I will modify my app to use the Crosswalk project runtime to prevent these kind of inconsistencies. Thanks!!!

ascott1 commented

Sorry for the outcome @joelcdoyle - I've definitely seen some odd behavior of absolute positioned elements with the default Chrome browser. 😢

  • 👍1
joelcdoyle commented

Upgraded my app to use Crosswalk instead of the default WebView and bigSlide is now working as expected on all test devices.

  • 🎉1
ascott1 commented

Excellent!