Fixed position in Safari

Question

The child fixed positioned element is not visible in Safari.

.parent {
  position: fixed;
  width: 70%;
  height: 60%;
  overflow: auto;
  background: red;
}

.child {
  position: fixed;
  top: 10%;
  right: 10%;
  background: blue;
}


<div class="parent">
  Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
  <div class="child">Close</div>
</div>

Is there any CSS property that can make it visible in Safari? Any help will be highly appreciated.

I had a similar problem with safari but it was on scroll the item that was supposed to be fixed was jumping like it was position absolute then snapping into place. I solved it by making the parent or child position relative. Safari seems to have trouble with nested `position:fixed` — Andrew, Jun 06 '19 at 10:32

score 6 · Answer 1 · answered Mar 06 '19 at 12:31

6

Try this and let me know if it helped.

add -webkit-transform: translateZ(0); to your script like this:

.child {
   position: fixed; 
   top: 10%; 
   right: 10%; 
   background: blue; 
   -webkit-transform: translateZ(0);
}

answered Mar 06 '19 at 12:31

mindmaster

1,828
12
22

disinfor · Answer 2 · 2019-03-06T18:41:22.303

Yes, change the child position to absolute;

.child {
  position: absolute;
  top: 10%;
  right: 10%;
  background: blue;
}

You'll notice, in Safari, the element is actually there but you have overflow set on your parent div. And since the child element is fixed, overflow doesn't apply to it and I believe a fixed element within another fixed element still brings it out of document flow and positions it against the DOM - but still respects the parent element width.

Remove overflow: auto from your parent div and you'll see the child div.

Here's some more reading on nested fixed elements: CSS: position:fixed inside of position: fixed

Edit: If the child has to be fixed, you might have to consider changing your markup:

.parent {
  position: fixed;
  width: 100%;
  height: 60%;
}

.content {
  position: fixed;
  width: 70%;
  height: 60%;
  background: red;
  overflow: auto;
}

.child {
  position: fixed;
  top: 10%;
  right: 10%;
  background: blue;
}

<div class="parent">
  <div class="content">
    Hello <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>gfgfg
  </div>
  <div class="child">Close</div>
</div>

That's not an option. The child and parent both have to be fixed. — Dipak, Mar 06 '19 at 18:09
@Dipak As you can see, the `overflow` is causing this issue on Safari. I added an updated version with a markup change. — disinfor, Mar 06 '19 at 18:37
Thanks! I had this in mind but unfortunately I cannot change the markup. — Dipak, Mar 07 '19 at 05:53

score 0 · Answer 3 · answered Jan 05 '21 at 08:09

0

in your parent div if you have used, overflow: hidden. remove it. Your child will be visible. for mr it worked.

answered Jan 05 '21 at 08:09

Jayshree

1

Fixed position in Safari

3 Answers3