umwandeln: translateY (-50%) funktioniert nicht in Safari

In Chrome funktioniert mein Code gut und der fragliche ist perfekt vertikal zentriert, in Safari ist dies jedoch nicht der Fall. Hier ist ein Teil meines Codes.umwandeln: translateY (-50%) funktioniert nicht in Safari

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

 
body { 
 
\t font-family: "Poiret One" 
 
} 
 

 
.myelement { 
 
\t top: 50%; 
 

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

 
.fullscreen-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
\t 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%; 
 
\t text-align: center; 
 
\t 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>--> 
 
\t <script type="text/javascript" src="js/jkit/jquery.jkit.1.2.16.min.js"></script> 
 
\t \t 
 

 
\t 
 
    <!----> 
 
    <!-- 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;"> 
 
\t <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>

Wie Sie es perfekt, aber in Safari sehen zentriert ist dies nicht der Fall ist, erscheint das Bild am oberen Rand des Bildschirms und nur die Hälfte davon zu sehen ist. Ich habe versucht, -webkit- zu verwenden, aber das würde auch nicht funktionieren. Das Problem, das ich glaube, ist hauptsächlich mit der transform: translateY(-50%);.

Quelle

2017-08-17 M Berger

Der Trick "Negativübersetzung" soll mit absolut positionierten Elementen verwendet werden. Sobald Sie position: absolute verwenden, können Sie sowohl die x-Achse als auch die y-Achse mit demselben transform zentrieren.

Ihre ändern .myelement Stile wie so das Problem zu beheben:

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

Quelle

2017-08-17 16:10:25

Whoa, ich danke Ihnen so sehr. Sie haben meinen Tag gemacht, mein Herr. –

umwandeln: translateY (-50%) funktioniert nicht in Safari

Antwort

Verwandte Themen