Why on Safari the transform translate doesn't work correctly?
You need another vendor prefixed style.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Please refer below to know which browser supports what and what prefix has to be added.
http://caniuse.com/#feat=transforms2d
Why does Safari treats transform translate different when compared to chrome?
This is just a bug, and as with all bugs of this nature the fix seems to be as simple as applying any 3d css
property to the flickering element.
For example:
.imgContainer {
-webkit-transform: translateZ(0);
...
transform: translateY(-50%) not working in Safari
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;
}
transform:translate not working in safari
I think your browser prefixes are a little messed up.
.heroimage {
position: relative;
z-index: 10;
}
.heroimage article {
position: absolute;
z-index: 100;
left: 50%;
top: 128px;
-webkit-transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
transform: translate(-50%,0%);
text-align: center;
background-color: #5b6370;
}
Related Topics
Css3 - 3D Flip Animation - Ie10 Transform-Origin: Preserve-3D Workaround
Change Style of Pseudo Elements in Angular2
Why Would Font Names Need Quotes
Convert 8-Digit Hex Colors to Rgba Colors
How to Align Nav Items to the Right in Bootstrap 5
CSS Transitions with Calc() Do Not Work in Ie10+
How to Make Firefox Print a Background-Color Style
CSS Text Justify with Letter Spacing
How to Get the Nth Child of an Element Using CSS2 Selectors
How to Create the Masonry Effects with Just Bootstrap 3 Grid System and CSS
CSS @Font-Face Not Working in IE8
How to Use Camelcase in CSS Class Names
Is This Possible to Create 2-Axis 4 Color Gradient in CSS (Bilinear Gradient)
Select All 'Tr' Except the First One