Position Fixed Not Working in Safari Version 8.0.2

Position fixed not working in Safari Version 8.0.2

Unfortunately, I never solved this problem with CSS, instead I had to rethink & rebuild the modal design for each of the modals that were being affected - removing all the fixed positioned elements, duplicating the innards for every modal in the markup instead of relying on angular to do it for me-

and upon further investigation ive learned new facts about z-index & the stacking context that could be the cause of the root issue

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion! Phillip Walton Article

CSS - Position:Fixed navigation bar not working in Safari (OS X or iOS)

I resolved this in Safari by following this prior post: Position fixed not working in Safari Version 8.0.2

What's causing the problem is your parent <div id="page"> is using transform: translate3d(0, 0, 0); & -webkit-transform: translate3d(0, 0, 0); . There are bugs with using this in Safari.

This is the code in your CSS file that needs to be commented out or deleted:

:not(html, #top-bar) {
     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0) 
}

Need an element to behave like position:fixed, but only within its parent

This is fairly easy to do with HTML and CSS: http://jsfiddle.net/ZCuRq/.

HTML:

see fiddle

CSS:

*, :before, :after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 10px;
}

body p + p,
.container + p {
    margin-top: 20px;
}

.container > .content {
    width: 80%;
    outline: 2px solid rgba(200, 200, 200, 0.5);
}

.container:before {
    content: "This shows dynamic usage of fixed positioning";
    display: none;
}

.container:hover:before {
    position: fixed;
    display: block;
    width: 15%;
    right: 10px;
    top: 10px;
    outline: 2px solid #bbb;
    padding: 10px;
    font: normal 10px/2 Sans-Serif;
    background-color: #fff;
}

Modal opens in all browsers other than Safari

You need to remove the position relative from your #myModal element.

$('#openModal').click(function() {  if (!($('.modal.in').length)) {    $('.modal-dialog').css({      top: 0,      left: 0    });  }  $('#myModal').modal({    backdrop: false,    show: true  });
  $('.modal-dialog').draggable({    handle: ".modal-header"  });});

.modal-dialog {  position: fixed;  width: 50%;  margin: 0;  padding: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button id="openModal">Show Modal</button>
<!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>      </div>      <div class="modal-body">        Modal Body      </div>      <div class="modal-footer">        <button class="btn btn-default" data-dismiss="modal">Close</button>      </div>    </div>  </div></div>

IOS8 Safari website links do not work after scrolling

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);
}

Safari flexbox does not contain its elements properly

The reason the header isn't expanding is because you've specified flex-shrink: 1 on .box .row.header

By saying that the content is allowed to shrink you are letting the header get squished by the content area below it.

Change this:

.box .row.header {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

To this:

.box .row.header {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

And your page will now work in Safari.

iOS 8: web app status bar position and resizing problems

Apple fixed this bug in iOS 8.3 beta 1

Popup does not open when clicking on marker safari

This is a bug of Leaflet 1.7.1, see Leaflet #7255

In the newest master version of leaflet it is working, see Issue Comment

So I recommand to change your leaflet-src from the Leaflet Release 1.7.1 to the master branch on Github

Position Fixed Not Working in Safari Version 8.0.2