Can't get text to center in Windows Safari - css

Question

When the mouse is hovered over the image, I want the text to be centered horizontally. It seems to work fine in Chrome, FF, and IE, but not Safari on Windows. Can someone help me out?
Fiddle: http://jsfiddle.net/gavk9yjs/
HTML
<div id="content">
<article class="project">
<img width="375" height="375" src="http://i.imgur.com/Eyv3TNs.jpg" alt="thumb">
<div class="overlay">
<a class="post-link expand" href="http://google.com">+</a>
<h3>Red Palm Oil</h3></div>
</article>
</div>
CSS
.project {
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
width: 100%;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
bottom: 0;
display: block;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.project:hover .overlay {
opacity: 1;
}
.expand {
background: #000;
border: 5px solid #000;
bottom: 0;
color: #FFF;
display: block;
font-size: 30px;
font-size: 3rem;
height: 60px;
left: 0;
line-height: 50px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
z-index: 2;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
h3 {
color: #FFF;
font-size: 17px;
font-size: 1.7rem;
font-family: 'Montserrat',sans-serif;
text-transform: uppercase;
left: 50%;
line-height: 1.3;
margin-top: 3.3em;
padding: 0 1em;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
JS
$('#content').on('mouseenter', 'article.project', function(){
// If loading icon doesn't exist in the DOM...
if ( !$('.overlay').find('.loading-icon').length) {
// And if the project wrapper is activated...
if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
$(this).addClass('hover');
} else {
$(this).addClass('hover grayscale grayscale-fade');
}
// If loading icon exists in the DOM...
} else {
$(this).find('.post-link').hide();
}
// Dirty fix for 1px white flicker on hover (Chrome)
var overlayWidth = $('article.project').outerWidth();
$('.overlay').css({
marginLeft: -1,
width: overlayWidth + 2
});
}).on('mouseleave', 'article.project', function(){
// If #project-wrapper is activated...
if ( $(this).closest('#main').find('#project-wrapper').hasClass('activated') ) {
$(this).removeClass('hover');
$(this).find('.post-link').show();
// If #project-wrapper is not activated...
} else {
// If loading icon is present...
if ( $(this).find('.loading-icon').length ) {
// Only remove the 'hover' class
$(this).removeClass('hover');
// If loading icon is not present...
} else {
// Remove all classes
$(this).removeClass('hover grayscale grayscale-fade');
$(this).find('.post-link').show();
}
}
});
// Adjust the project titles so they always fit the container nicely
function adjustTitle() {
var thumbWidth = $('article.project > img').outerWidth();
if (thumbWidth <= 220) {
$('.overlay > h3').addClass('mobile');
} else {
$('.overlay > h3').removeClass('mobile');
}
}
$(window).on('resize', adjustTitle);

Answer 1

Safari still needs a vendor prefix on some CSS3 properties, so you will need to add after
transform: translate(50%, 50%) :
-webkit-transform: translate(50%, 50%);
Also you solution seems a bit overcomplicated. You can achieve a centred text by removing the left: 50% and transform: translate(50%, 50%).
Hope this helps.

Answer 2

The (technical) solution to our problem has already been posted by someone, but I'd like to point something else:
Safari for Windows is way out of date. I urge you to use a different browser for Windows.
However, If you're only doing browser optimizations for different browsers, consider this: Safari for Windows is Version 5.1.7 at best. According to caniuse's browser usage table, Safari 5.1 has a global share of 0.37%. Compare this number to IE8 (2.9%) and IE9 (1.82%), both of which don't support transitions at all and IE8 even doesn't support transforms.
So if you're worried about shutting that tiny group of Safari for Windows users out, there is that unfortunately still not so tiny group of old-IE users that are much worse.