CODEWITHSUNDEEP
csssafaritransformcenteringtranslate
M Berger
M Berger

Reputation: 13

transform: translateY(-50%) not working in Safari

In Chrome my code works fine and the in question is perfectly vertically centered, in Safari however this is not the case. Here is some of my code.

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "Poiret One"
}

.myelement {
	top: 50%;

	-ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
	opacity: .80;
	width: 30%;
	height: auto;
	z-index: 100;
	position: relative;
}

.fullscreen-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
	z-index: -100;
}

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
}

.cover-thing {
    width: 100%;
    height: 100%;
	  text-align: center;
	  top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>something.com</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Core JavaScript >
    <script src="js/bootstrap.min.js"></script-->
    
    <!--Custom JavaScript-->
    <script src="js/mjberger.js"></script>
    <!--JQuery-->
    <script src="js/jquery.min.js"></script>
    <!--<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>-->
    
    <!--<script type="text/javascript" src="js/jkit/jquery-1.9.1.min.js"></script>-->
	<script type="text/javascript" src="js/jkit/jquery.jkit.1.2.16.min.js"></script>
		

	
    <!---->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Inknut+Antiqua" rel="stylesheet">
<link rel="icon" href="mtab.png">

</head>
<body>

<section id="myDiv" class="cover-thing first" style="overflow: hidden;">

<div class="fullscreen-bg" style="z-index: 100; position: absolute; padding: 0px; justify-content:center;">
	<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="myelement"></img>
</div>

</section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

As you can see it is centered perfectly, but in Safari this is not the case, the image appears at the top of the screen and only half of it can be seen. I tried to use -webkit- but that would not work either. The issue I believe is mainly with the transform: translateY(-50%);.

Upvotes: 0

Views: 6190

Answers (1)

Jon Uleis
Jon Uleis

Reputation: 18659

The "negative translate" trick is meant to be used with absolute positioned elements. Once you use position: absolute, you can center both the x-axis and y-axis with the same transform.

Change your .myelement styles like so to fix the problem:

.myelement {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: .80;
  width: 30%;
  z-index: 100;
}

Upvotes: 1

Related Questions