I have a card in which I display a picture on the left, a title on the right top and some tags on the right bottom. In most browsers it loads like this:
But when I load the page in Safari, the tags go on top of the title, like this:
And, what is even stranger, when I hover the "Load more" button, the page returns to its normal state, as it should be from the beginning (I thought that box-shadows didn't affect DOM positioning).
Facts:
- In its inactive state, the "Load more" button has a 4px box-shadow, but when it's hovered the box-shadow is none.
- When I tried to remove the box-shadow of the button completely, Safari rendered it the wrong way and it stayed the same, even when I hovered the button.
- The tags are wrapped in an absolute-positioned DIV, with bottom: 0.
- The wrapper of all items (big white round-cornered rectangle) is a flexbox.
- The title and the tags DIV are wrapped in a relative-positioned DIV.
How can I fix this issue?
EDIT
Here is the bit of my code which controls this card:
*{
box-sizing: border-box;
}
body{
background-color: rgb(239,239,239);
margin: 0;
}
.grid{
width: 100%;
padding: 10px;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: wrap;
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
.item{
background-color: rgb(255,255,255);
font-family: 'Roboto', sans-serif;
padding: 20px;
border: 4px solid rgb(232,232,232);
display: -webkit-box;
display: flex;
-webkit-box-flex: 1;
flex: 1 1 auto;
margin: 10px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.item .info{
width: 100%;
position: relative;
}
.item .photo{
display: inline-block;
height: 10em;
width: 10em;
margin-right: 2.5em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
}
.item h1{
font-weight: 700;
font-size: 1.5em;
margin: 0;
}
.item .tags{
bottom: 0;
position: absolute;
display: block;
}
.item .tag{
background-color: rgb(236,237,240);
color: rgb(153,153,153);
text-transform: uppercase;
padding: 0.6em 2em;
display: inline-block;
margin: 0.5em 0.5em 0 0.5em;
max-width: 14em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
}
.item .tag.unloaded{
background-color: rgb(160,160,160);
color: rgb(255,255,255);
-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
}
.item .tag:first-child{
margin-left: 0;
}
.item .tag:last-child{
margin-right:0;
}
.item .tag.unloaded:hover{
background-color: rgb(100,100,100);
color: rgb(255,255,255);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}<!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, user-scalable=no">
<title>FlickList</title>
<link href="css/main.css" rel="stylesheet">
<link href="css/grid.css" rel="stylesheet">
<link href="css/components/item.css" rel="stylesheet">
</head>
<body>
<section class="grid">
<div class="item">
<img class="photo" src="https://static.pexels.com/photos/26559/pexels-photo-26559.jpg" alt="Forest"/>
<div class="info">
<h1>Forest</h1>
<div class="tags">
<span class="tag unloaded">Load more</span>
<span class="tag">Test</span>
</div>
</div>
</div>
</section>
</body>
</html>.item is the card itself (the big white round-cornered rectangle)
.item .info is the relative-positioned wrapper around the title and the tags
.item .tags is the tags wrapper
.item .tag.unloaded is the style of the "Load more" button
