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>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>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>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>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 to center fixed content in flexbox container in Safari?
Element with position: fixed (or position: absolute) won't behave in the same way in Safari as they do in Chrome/Firefox.
To center a flex item in Safari you need to use transform: translate
Updated codepen
Stack snippet
#container { width: 100%; background: yellow; height: 20px; position: absolute; top: 0; left: 0; display: flex; justify-content: center;}
#content { padding: 0px; background: linen; position: fixed; left: 50%; transform: translateX(-50%);} <div id="container"> <div id="content">THIS CONTENT IS NOT CENTERED IN SAFARI</div></div>Position: absolute behaving differently in safari
A few things here.
Firstly, prefix your properties; you are using transform but you are not prefixing; they will not work in Safari.
webkit-transform: translate(x,x);
Secondly, you have this in your @media query - max-height: 800px. That means do this stuff when the browser is **less than** 800px in height - demo.
Is that really what you want to say for a @media rule targeting a portrait tablet (an iPad for example, has is 768 widthby 1024 height)?
To fix your issues:
1) prefix your transforms
2) fix your @media rules
3) remove the bottom: auto rule
4) remove/adjust the bottom: 49% rule
Flexbox working differently on safari compared to chrome
Try either removing position: absolute; from #maintitle or changing it to relative.
/* Parent elements */ html,body {
height:100%;}
/* Sets the container-fluid, row and column classes to 100% of the html and body elements */ .container-fluid,.row, .col-md-6, .col-xs-10 { height:100%;}
#titleframe {
position:relative; display:-webkit-box; display:-ms-flexbox; display:flex;/* Flex-box ensures font is centered both vertically and horizontally within the title frame using align-items and justify-content. See http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block */ -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; max-width:100%; /* max-width ensures background does not stretch outside container div */ height:15%; /* Represents height relative to parent elements - in this case .container-fluid,.row, .col-md-6, .col-xs-10 which are all set to 100% */ border-style:solid; border-width:2px; border-color:black;
background: url("../img/pages/frame4.3.jpg"); background-size: 100% 100%; /* Sets background image to fill 100% of container in both x and y directions. See: http://stackoverflow.com/questions/15160764/background-image-stretch-y-axis-only-keep-repeat-x */ background-repeat:no-repeat;
}
#titlepaper {
position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:100%; border-style:solid; border-width:2px; border-color:black; /*padding:12px 25px;*/ padding: 2% 5.5% 2% 5%;
}
#maintitle {
position:relative; font-family:"Roboto Condensed", sans-serif; font-style:italic; font-weight: 700; color: black; text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1);
word-wrap:break-word; font-size:50px; width:500px; text-align: center; flex:1;}
/* All media break-points: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints */@media only screen and (max-device-width : 480px) {
/* Styles */ #maintitle {
font-size:30px;
width:200px;
}
}<div class = "container-fluid" style = "border:solid;">
<div class = "row" style = "margin-top:5%"> <div class = "col-md-offset-3 col-md-6 col-xs-offset-1 col-xs-10" > <!-- <img id = "titleframe" src="../img/pages/frame4.3.jpg" class="img-fluid" alt="Responsive image" style = "height:auto; max-width:100%;">
<img id ="titlepaper" src="img/pages/paper.jpg" class="img-fluid">--> <div id = "titleframe"> <img id ="titlepaper" class = "img-fluid" src="img/pages/paper.jpg"> <font id="maintitle">History Maps</font> </div> <!--<div class = "container-fluid" id = "test"></div>-->
</div>
</div>
</div>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>Related Topics
Statically Rotate Font-Awesome Icons
Can CSS3 Box-Shadow:Inset Do Only One or Two Sides? Like Border-Top
Position Fixed Not Working for Header
CSS: Position Loading Indicator in The Center of The Screen
How to Properly Set an Element's Scope Using Bem
Bootstrap 3.0 Button in Navbar
Have an Issue with Box-Shadow Inset Bottom Only
Bootstrap Icons Not Showing in Published ASP.NET MVC Application
Background Color in Input and Text Fields
CSS Hide All Images with Matching Src Attribute
Browser Developer Tools: What Is The Position of The HTML Element
How to Refer to an Internal Gradient Definition Inside an Svg Sprite Symbol
Building a 4 Corners-Colors CSS3 Gradient
Sass Mixin for Background Transparency Back to Ie8