Search code examples
cssangularjstwitter-bootstrapios8mobile-safari

IOS8 Safari scrolling content cut off

I have an Angular website with a Bootstrap theme built primarily for mobile and on IOS8 Safari it randomly cuts off scrolling content(See image).

I have tried to inspect element when it does this but the CSS is not affecting this, and it only happens sporadically. Chrome, Opera and every other browser on IOS8 works great, it's only happening on Safari.

Any help is greatly appreciated :)

Thanks

enter image description here

CSS for the scrollable content

.scrollable{
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 position: absolute;
 top: 47px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 }
Solution

  • A developer at work managed to solve this issue by removing transitions between pages. See the code he commented out below. It was found in controllers.js. Hopefully this example will help you find the transition code in your project.

    $scope.slide = '';
$rootScope.back = function() {

//$scope.slide = 'slide-right';
 $window.history.back();
}
$rootScope.go = function(path){
//$scope.navLeft = false;
//$scope.navRight = false;
//$scope.slide = 'slide-left';
$location.url(path);
}