0

I've got an issue and can't solve it easily because appears only in one case : when i'm on my page and i switch from landscape to portrait, on iOS. My app is a Phonegap app using Angular and plugin device-orientation to make it working with my responsive CSS.

All is fine, except this part. I've got an horizontal menu and i wan't user able to scroll it if there is overflow.

Here is my code :

CSS

nav.inline {
    background: #e4eeef;
    outline: 1px solid #e4eeef; /* Safari bug rendering */
    overflow: hidden;
    overflow-x: scroll;
    text-transform: uppercase;
    -webkit-overflow-scrolling: touch;
}
nav.inline ul {
    list-style: none;
    min-width: 102%;
    padding: 0 2%;
    width: 102%;
    white-space: nowrap;
}
nav.inline ul li {
    display: inline-block;
    white-space: nowrap;
}
nav.inline ul a {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    color: #4b8c95;
    display: inline-block;
    font-size: 1.7em;
    font-weight: bold;
    line-height: 80px;
    margin: 0 0.7em;
}
nav.inline ul a.active {
    border-bottom: 4px solid #4b8c95;
}

HTML

<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>

And the partial associated

<ul data-snap-ignore="true">
    <li><a ng-click="setTab('link1')">Link 1</a></li>
    <li><a ng-click="setTab('link2')">Link 2</a></li>
    ...
</ul>

You can see "data-snap-ignore" because i'm using angular-snap.js for an other menu (left menu) and i don't wan't him to appear when i'm sliding this one (this part is working well).

Thanks for helping ;)

Tom
  • 33
  • 6

1 Answers1

0

Yep, this sucks. It's a bug, AFAICT.

So far the only mechanism I've found to fix it is to toggle display from none to block on the container, like so:

var navElement = document.getElementsByTagName("nav")[0]; navElement.style.display = "none"; setTimeout ( function() { navElement.style.display = "block"; }, 0 );

Which *looks * horrible, in my opinion, but it does restore the scrolling ability.

Since, as far as I can tell, it never breaks if the elements within force the container to scroll, it should work to ensure that the container always scrolls, even if by a pixel or two.

Kerri Shotts
  • 2,372
  • 1
  • 17
  • 19
  • Thanks, it works great. Not very pretty but at least the job is done ! ;) – Tom May 06 '14 at 07:12
  • Here is how i made with angular : $scope.$on("windowResize", function() { var elmt = angular.element("nav.inline"); elmt.css("display", "none"); $timeout(function() { elmt.css("display", "block"); }, 0); }); – Tom May 06 '14 at 07:12