Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Vertical centering flexbox overlay in iOS safari

Vertical centering flexbox overlay in iOS safari

Problem

I have the following code for my flexbox overlay

.overlay-content-wrapper {
  display: -webkit-flex;
  display: flex;
  position:fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.overlay-content {
    padding: 8px;
    min-height: 10px;
    min-width: 10px;
    margin: auto;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #a5a5a5;
    position: relative;
}

Some content

In Chrome it works perfectly but in Ios Safari (v6 simulator) it doesn't center vertically. What do I need to change to get it to work?

Problem courtesy of: wheresrhys

Solution

After digging around for a while I discovered that iOS safari supports one of the old syntaxes with teh webkit prefix (given its market share it's surprising more flexbox tutorials/tools don't include the old syntax... but hey ho).

So here is my final CSS which should work in every browser that supports some version of flexbox and falls back to just horizontal centering in other browsers.

.overlay-content-wrapper {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position:fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.overlay-content {
    padding: 8px;
    min-height: 10px;
    min-width: 10px;
    margin: auto;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #a5a5a5;
    position: relative;
}
Solution courtesy of: wheresrhys

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Vertical centering flexbox overlay in iOS safari

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×