Safari Background-image CSS bug

by Ben Gillbanks

HTML

<article id="post-275" class="post-archive has-image post-275 post type-post status-publish format-standard has-post-thumbnail hentry category-war tag-bomb-damage tag-brambles-farm tag-co-op tag-linthorpe-road tag-victoria-hall tag-war tag-world-war-two tag-ww2 tag-wwii post-loaded" style="position: absolute; left: 401px; top: 0px;">
	<section>
		<a href="http://www.42898e6bffb13b342018a6586-10856.sites.k-hosting.co.uk/mytownmyfuture/co-op-victoria-hall-linthorpe-road-1942/" class="link-image" style="background-image:url(https://i1.wp.com/www.42898e6bffb13b342018a6586-10856.sites.k-hosting.co.uk/mytownmyfuture/wp-content/uploads/2017/08/1071-Coop-Victoria-Hall-Linthorpe-Road_1942__-1.jpg?resize=320%2C320);"></a>
		<div class="entry">
			<h2 class="entry-title">
				<a href="http://www.42898e6bffb13b342018a6586-10856.sites.k-hosting.co.uk/mytownmyfuture/co-op-victoria-hall-linthorpe-road-1942/" rel="bookmark">
					Co-op (Victoria Hall), Linthorpe Road (1942)				</a>
			</h2>
	<p class="post-meta-data">
		<span class="posted-on">Date added: 
			August 18, 2017		</span><br>
		<span class="sep">•</span> <a href="#comments" class="comments-link">0</a>
	</p>
		</div>
	</section>
</article>

<a href="http://www.42898e6bffb13b342018a6586-10856.sites.k-hosting.co.uk/mytownmyfuture/">test</a>

CSS

article.post-archive section h2 {
    margin: 0;
    font-size: 1.4em;
}
article .entry-title {
    margin: 0;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
    color: #005699;
}
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a;
    font-family: 'Alegreya Sans', sans-serif;
    line-height: 1.1667;
    margin-top: 0;
    font-weight: normal;
}

article .post-meta-data {
    font-size: 0.85em;
    color: #999999;
}
p {
    margin: 0 0 10px 0;
}

article.post-archive section .entry {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 15px;
    margin: 0;
    text-align: center;
}

article.post-archive {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 20%;
    height: 200px;
    overflow: hidden;
    position: relative;
    padding: 1px;
}

article.post-archive section {
    display: block;
    height: 100%;
    background: #005699;
    position: relative;
    overflow: hidden;
}

article.post-archive section a.link-image {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 1;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
    transition: 0.5 opacity ease-in-out;
    transition-delay: 200ms;
    z-index: 10;
}

article.post-archive section a.link-image:hover {
    opacity: 0.1;
    transition: 0.1 opacity ease-in-out;
    transition-delay: 50ms;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
}

article.post-archive section .entry {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 15px;
    margin: 0;
    text-align: center;
}