Absolutely Positioning with Flexbox in Safari

Absolutely positioning with flexbox in Safari

Because position: absolute; break display: flex, use transform: translate instead

    .container {

      position: relative;

      width: 15rem;

      height: 15rem;

      border-radius: 50%;

      background-color: blue;

    }

    .container div {

      border-radius: 50%;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%,-50%);

    }

    .inner-one {

      width: 13rem;

      height: 13rem;

      background-color: green;

    }

    .inner-two {

      width: 11rem;

      height: 11rem;

      background-color: purple;

    }

    <div class="container">

      <div class="inner-one"></div>

      <div class="inner-two"></div>

    </div>

Flexbox and absolute positioning not working in Chrome and Safari

Absolute elements wont get positioned by the parents aligns. Just position it with left and transform it to center it.

just a sidenote, there is no need to use display: flex; on the absolute element.

.button {

  align-items: center;

  background-color: deeppink;

  border: 2px solid;

  border-color: aqua;

  cursor: pointer;

  display: inline-flex;

  font-size: 20px;

  font-weight: bold;

  justify-content: center;

  margin-bottom: 5px;

  padding: 3px 10px;

  position: relative;

  text-transform: lowercase;

}

.button:after {

  content: '';

  background-color: deepskyblue;

  bottom: -4px;

  font-size: 5px;

  position: absolute;

  width: 25%;

  height: 10px;

  left: 50%;

  transform: translateX(-50%);

}

<button type="button" class="button">Submit</button>

How can I get Flexbox positioning to work in Safari 10.0?

The problem is you're absolutely positioning flex items.

In a flex container, position: absolute removes items from the flex formatting context.

Just use flex properties to align your items. You don't need position: absolute.

https://www.w3.org/TR/css-flexbox-1/#abspos-items

Flex with absolute positioning does not work in safari

Here is one option, using display: inline-block instead of flexbox, and transform: translate.

window.addEventListener('load', function() {

  document.querySelector('button').addEventListener('click', function() {

    var ques = document.querySelector('.text-container:not(.hidden)');

    ques.classList.toggle('hidden');    

    var next = ques.nextElementSibling;

    if (next) {

      next.classList.toggle('hidden');

      return;

    }

    document.querySelector('.text-container').classList.toggle('hidden');

  })

})

.container {

  height: 160px;

  background: black;

}

.question {

  position: relative;

  margin: 0 auto;

  width: 90%;

  height: 100%;

  overflow: hidden;

}

.text-container {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  transform: translate(-50%,-50%);

  color: white;

  transition: left 0.5s;

}

.text-container.hidden {

  left: -50%;

}

.q {

  display: inline-block;

  width: 20%;

  vertical-align: top;

}

.q-text {

  display: inline-block;

  width: 80%;

  vertical-align: top;

  padding-right: 12%;

  box-sizing: border-box;

}

button {

  margin: 15px 0;

  padding: 10px;

}

<div class="container">

  <div class="question">

    <div class="text-container">

      <div class="q">

        Qest1:

      </div><div class="q-text">

        1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type an

      </div>

    </div>

    <div class="text-container hidden">

      <div class="q">

        Qest2:

      </div><div class="q-text">

        2Lorem Ipsum is simply dummy text of the printing and ty

      </div>

    </div>

    <div class="text-container hidden">

      <div class="q">

        Qest3:

      </div><div class="q-text">

        3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when

      </div>

    </div>

  </div>

</div>

<button>Next question</button>

How to center absolutely positioned children of a flex container in Safari?

When it comes to Flexbox and absolute positioning, there is a few do's and don't's, and in this case, Safari won't center an absolute positioned element the other browsers does.

You can combine Flexbox and transform: translate, as the latter does not impact the former, and when times comes, where they all behave the same with Flexbox alone, you can just drop the transform/left/top part.

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

}

.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

}

<div class='container'>

  <div class='text'>

    This should be centered

  </div>

  <img src="https://placehold.it/250x250"/>

</div>

Centering a div using flex and position: absolute gives different results on Safari

That is because Safari doesn't treat absolute positioned elements as the rest of the browsers do.

• Flexbox Gets New Behavior for absolute-positioned Children (from 2016)
• Flexbox - Absolutely-Positioned Flex Children

To center an absolute positioned element in Safari you need to use transform: translate

Note, if it should be relative to its parent, the flex-container, the flex-container has to have a position other than static, so here I gave it position: relative;

.flex-container {

  position: relative;                /*  added  */

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 300px;

  background: #e2e2f2;

}

.flex-overlapping-item {

  position: absolute;

  left: 50%;                         /*  added  */

  top: 50%;                          /*  added  */

  transform: translate(-50%,-50%);   /*  added  */

}

<div class='container'>

  <div class='flex-container'>

    <div class='flex-overlapping-item'>

      <h3>Drag photo here</h3>

      <p>Photo must have 1000px x 1000px</p>

    </div>

    <div class='flex-overlapping-item drag-zone'>

      <div class='drag-zone-content'>

      </div>

    </div>

  </div>

</div>

Safari (iOS and OSX) doesn't display position: absolute inside flexbox

Remove height: 100%; from your .container class, as flex-grow: 1; already does what you need.

See this question / answer for more details.

Safari relative position inside flex

I don't have an ios device to test on but I would move relative position up one level and make the .verticalHorizontal absolute:

.box {

  color: #ffffff;

  padding: 0.5rem;

  width: 50%;

}

.box img {

  max-width: 100%;

  max-height: 100%;

}

.box a {

  color: #ffffff;

}

.box a:hover {

  text-decoration: none;

}

.box input {

  width: 100%;

}

.bgDarkBlue {

  background-color: #3F51B5;

}

.shadowBox {

  box-shadow: 7px 5px 25px black;

}

.verticalHorizontal {

  top: 50%;

  left: 50%;

  position: absolute;

  -webkit-transform: translate(-50%, -50%);

  -moz-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="box shadowBox bgDarkBlue">

 <a href="#">

  <div class="container-fluid">

   <div class="row">

    <div class="col-4">

     <img src="http://tusla.info/images/safari-column/evaluation.svg">

    </div>

    <div class="col-8 pl-sm-0 position-relative">

     <h1 class="verticalHorizontal">Text</h1>

    </div>

   </div>

  </div>

 </a>

</div>

<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

Center text over an image in flexbox

To center text over an image you don't need flexbox. Just use CSS positioning properties.

.height-100vh {
    height: 100vh;
    position: relative;               /* establish nearest positioned ancestor for
                                         absolute positioning */
}

.text {
    position: absolute;  
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* precise centering; see link below */
}

body {

  margin: 0px;

}

.height-100vh {

  height: 100vh;

  display: flex;           /* establish flex container */

  flex-direction: column;  /* stack flex items vertically */

  position: relative;      /* establish nearest positioned ancenstor for absolute positioning */

}

.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  color: white;

  font-weight: bold;

}

.center-aligned {

  display: flex;

  align-items: center;

  justify-content: center;

}

<section class="height-100vh center-aligned">

  <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg/revision/latest?cb=20090904155448" />

  <div class="text">SOME TEXT</div>

</section>

Flexbox container with position absolute doesn't fit content width in IE

The problem is not related to flexbox.

It's an issue of absolute positioning rendering variations among browsers.

When you set position: relative on an element it sets the bounding box for descendants with position: absolute.

In Chrome, the absolutely-positioned descendants are permitted to overflow the bounding box.

In IE11, they are not. The absolutely-positioned elements are cut-off once the limit of the bounding box is reached.

One workaround would be to remove position: relative from the container. Now the absolutely-positioned submenu has a larger bounding box (based on the nearest positioned ancestor or, if none exist, the initial containing block (i.e., the viewport)).

ul li.menu-metier {
   /* position: relative; */
   padding-bottom: 25px;
}

revised demo

Another workaround would be to adjust the right offset to accommodate the content.

ul.sub-menu {
    right: -600px;
}

revised demo

You can also try setting a width.

None of these options are pretty. But then again, we're dealing with IE.

You may find other workarounds via search.

---

Related Topics