I have been struggling with this issue for a while now. I found these two topics that seem to have the same issue. But I have not been able to solve it with the tricks mentioned in them.
1px white spacing in Chrome between div's
overflow: hidden is causing white border with css transition
When I applied Css transitions to the code, these small white borders started to appear on some of the divs. They only appear in certain window sizes. And I can't get rid of them. Can anyone please help me? I have tried to put everything from overflow:hidden; to -webkit-backface-visibility: hidden; in different places of the css. But nothing has worked, and I am not quiete sure where to put it.
This is what the white borders issue looks like: SCREENPRINT
The whole file is a lot of code, I didn't want to crowd this page so the full code is here: http://jsfiddle.net/oocwfery/1/
I only put the HTML and the CSS parts where I think the issue might be here. If you'll need the whole code its in the jsfiddle link. I have also commented where the transitions are applied in the code. There is a lot of similar transitions parts like this one in the code on jsfiddle but it would get obnoxious to post it all here?
*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*----------------------------------
GRID
----------------------------------*/
.all-content{
width: 100vw;
height: 100vh;
}
ul{
list-style: none;
margin: 0;
padding: 0;
border: 0;
display: inline-block;
}
li {
position: relative;
}
.squares {
opacity: 0;
}
.grid.visible .squares {
opacity: 1;
}
.squares > li.hidden{
opacity: 0.2;
}
.sq {
float: left;
width: 100vw;
height: 100vw;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
.sq1 {
background: #06465b;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.sq1:before {
background-size: auto 100%;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url("../img/kim.jpg");
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sq1:hover, .sq1:focus, .sq1:active {
color: white;
}
.sq1:hover:before, .sq1:focus:before, .sq1:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.sq:hover h1,
.sq:hover h2,
.sq:hover h3,
.sq:hover img{
opacity: 1;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
img {
opacity: 0;
transition: opacity .2s linear, border-radius 1s ease-in 1s;
}
/*THIS IS WHERE THE TRANSITIONS ARE APPLIED*/
h1,
h2,
h3 {
opacity: 0;
margin: 0;
padding: 0;
border: 0;
transition: opacity .2s linear, border-radius 1s ease-in 1s;
}
.sq {
width: 33.3333333vw;
height: 33.3333333vw;
}
HTML (Some parts of the handlebars code doesn't want to come on here for some reason, but those parts are not important I think.)
<body>
<div class="all-content type">
<!-- Gridsystem, data pulled from Json. -->
<div class="grid page">
<section class="clearfix">
<ul class="squares">
<script id="projects-template" type="text/x-handlebars-template">
<li data-index="{{id}}" class="{{sqid}}">
<img src="{{logo}}">
<h3><mark style="background-color: #FFFFFF">{{year}}</mark><br/></h3>
<h1><mark style="background-color: #FFFFFF">{{name}}</mark><br/></h1>
<h2><mark style="background-color: #FFFFFF">{{type}}</mark></h2>
</li>
</script>
</ul>
</section>
</div>
<!-- Every project has its own page that is hidden, is made visible when clicked on in grid system. -->
<div class="single-project page">
<div class="overlay"></div>
<div class="popup-detail">
<h1><mark style="background-color: #FFFFFF">Single project view</mark></h1>
<h4><mark style="background-color: #FFFFFF">Blurb placeholder</mark></h4>
<span class="close">×</span>
</div>
</div>
<div class="error page">
<h3>Something went wrong and I'm not sure why.. :o</h3>
</div>
</div>
Would be forever greatful for any help.
