First of all, sorry for my english.
I'm building a website using django 1.11. And, ofc, using css to make it look better. Also I chose to use css grid as layout system.
But CSS transition effects very slow in browser except Firefox (just hover effect for links). Everything works perfect in firefox. However, nothing works properly in other browsers. I have tested on latest versions of opera, chrome.
Transition effects in chrome is very slow. In opera it is barely moving.
I tried to fix it for few days. I read about transitions, transforms, animations in CSS. But i still can't find where the problem is.
After all this days I'm thinking this bug is somewhere in CSS grid, because I reduced number of nested css grid's containers and animation played a little bit faster. Same thing happened when I just comment some block (like carousel). But still very slow.
Why everything works perfect in firefox? What should I do to fix this for other browsers? I can't and don't want to release buggy crap. Please, show me where did i go wrong.
There is generated html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/static/main/css/main.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/main/css/index.css" type="text/css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js'></script>
</head>
<body>
<div class="header">
<div id="particle-canvas" class="particle-canvas"></div>
<a href="/" class="btn home">big home page button</a>
<a href="/service/" class="btn service">service</a>
<a href="/contacts/" class="btn contact">contacts</a>
<a href="/news/" class="btn news">news</a>
<a href="/tests/" class="tests">Tests</a>
<a href="/admin" class="admin">Admin</a>
</div>
<div class="content">
<div class="carousel">
<input type="radio" id="banner1" class="checker" name="banner" checked>
<input type="radio" id="banner2" class="checker" name="banner">
<input type="radio" id="banner3" class="checker" name="banner">
<input type="radio" id="banner4" class="checker" name="banner">
<div id="slide1" class="slide">
<img id="img1" src="#" alt="">
</div>
<div id="sl-title1" class="sl-title">title1</div>
<div id="sl-description1" class="sl-description">text</div>
<a id="sl-url1" class="sl-url" href="#" ></a>
<div id="slide2" class="slide">
<img id="img2" src="#" alt="">
</div>
<div id="sl-title2" class="sl-title">title2</div>
<div id="sl-description2" class="sl-description">text</div>
<a id="sl-url2" class="sl-url" href="" ></a>
<div id="slide3" class="slide">
<img id="img3" src="#" alt="">
</div>
<div id="sl-title3" class="sl-title">title3</div>
<div id="sl-description3" class="sl-description">text</div>
<a id="sl-url3" class="sl-url" href="#" ></a>
<div id="slide4" class="slide">
<img id="img4" src="#" alt="">
</div>
<div id="sl-title4" class="sl-title">title4</div>
<div id="sl-description4" class="sl-description">text</div>
<a id="sl-url4" class="sl-url" href="" ></a>
<div class="controls">
<label for="banner1"><div class="progressbar"><div class="progressbar-fill"></div></div><span>01</span> kword1</label>
<label for="banner2"><div class="progressbar"><div class="progressbar-fill"></div></div><span>02</span> kword2</label>
<label for="banner3"><div class="progressbar"><div class="progressbar-fill"></div></div><span>03</span> kword3</label>
<label for="banner4"><div class="progressbar"><div class="progressbar-fill"></div></div><span>04</span> kword4</label>
</div>
</div>
<div class="info-img">
<img src="#" alt="" />
<div class='imgelem'>
<h3>service</h3>
</div>
<a href="/service/"></a>
</div>
<div class="info-text"><span>text</span></div>
<div class="partners">
<div class="in">
<div class="in-title">partners1</div>
<img src="/static/main/img/partners/i1.png" alt="">
<img src="/static/main/img/partners/i2.png" alt="">
<img src="/static/main/img/partners/i3.png" alt="">
<img src="/static/main/img/partners/i4.jpg" alt="">
<img src="/static/main/img/partners/i5.jpg" alt="">
</div>
<div class="out">
<div class="out-title">partners2</div>
<img src="/static/main/img/partners/i1.png" alt="">
<img src="/static/main/img/partners/i2.png" alt="">
<img src="/static/main/img/partners/i3.png" alt="">
<img src="/static/main/img/partners/i4.jpg" alt="">
<img src="/static/main/img/partners/i5.jpg" alt="">
</div>
</div>
</div>
<div class="footer">
<div class="copy"><p>Copyrights, 2017</p></div>
<div class="social"><p>Icon</p></div>
<div class="contacts"><p>Phone: xxx-xxx-xxx</p>
<p>Address: city, street</p>
</div>
</div>
<script src="/static/main/js/main.js"></script>
<script src="/static/main/js/index.js"></script>
</body>
</html>
Css file for template page:
@import url('https://fonts.googleapis.com/css?family=Play');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* =========================================== */
/* ==================GRID SYSTEM============== */
/* =========================================== */
body {
background-color: #666666;
font-family: Play;
min-height: 100%;
display: grid;
grid-template-rows: 300px 1fr 75px;
grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
}
/* ----------------HEADER------------------ */
.header {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-area: 1/1/2/6;
justify-items: center;
align-items: center;
}
/* ------------------particle-canvas----------- */
.particle-canvas {
justify-self: stretch;
align-self: stretch;
grid-area: 1/1/4/4;
z-index: 1;
}
/* ----------------navbar-------------------- */
.tests {
grid-area: 1/3/2/4;
z-index: 2;
justify-self: end;
align-self: start;
}
.admin {
grid-area: 2/3/3/4;
z-index: 2;
justify-self: end;
align-self: start;
}
.btn.home {
grid-area: 2/1/3/4;
z-index: 2;
}
.btn.service {
grid-area: 3/1/4/2;
z-index: 2;
}
.btn.contact {
grid-area: 3/2/4/3;
z-index: 2;
}
.btn.news {
grid-area: 3/3/4/4;
z-index: 2;
}
/* ----------------FOOTER------------------ */
.footer {
grid-area: 3/2/4/5;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
border-top: solid;
border-color: #23a2d4;
}
.footer .copy {
grid-column: 1/2;
}
.footer .social {
grid-column: 2/3;
justify-self: center;
}
.footer .contacts {
grid-column: 3/4;
justify-self: end;
}
/* ============================================= */
/* ================BUTTONS====================== */
/* ============================================= */
.btn {
color: #23a2d4;
cursor: pointer;
font-size: 16px;
font-weight: 200;
line-height: 45px;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
text-align: center;
letter-spacing: 0;
z-index: 2;
}
.btn,
.btn:before,
.btn:after {
-webkit-transition: letter-spacing .7s linear,
border-color .7s linear,
width .7s linear;
-moz-transition: letter-spacing .7s linear,
border-color .7s linear,
width .7s linear;
-o-transition: letter-spacing .7s linear,
border-color .7s linear,
width .7s linear;
transition: letter-spacing .7s linear,
border-color .7s linear,
width .7s linear;
}
.btn.home {
font-size: 26px;
font-weight: 400;
}
.btn:hover {
letter-spacing: 5px;
}
.btn:before,
.btn:after {
content: "";
border: 1px solid rgba(255, 255, 255, 0);
display: block;
width: 0;
margin: auto;
}
.btn:hover:before,
.btn:hover:after {
border-color: #23a2d4;
width: 100%;
}
Css for index page:
.content {
grid-area: 2/1/3/6;
display: grid;
grid-template-rows: 1fr 0.6fr 1fr;
grid-template-columns: 0.2fr repeat(3, 1fr) 0.2fr;
grid-row-gap: 10em;
}
/* ========================================= */
/* ==============CAROUSEL=================== */
/* ========================================= */
/* --------------GRID SYSTEM---------------- */
.carousel {
grid-area: 1/1/2/6;
display: grid;
grid-template-rows: 0.5fr 1fr 0.3fr;
grid-template-columns: 1fr;
}
.carousel .slide {
grid-area: 1/1/4/2;
z-index: 1;
}
.carousel .slide img {
height: 100%;
width: 100%;
opacity: 0;
}
.carousel .sl-title {
grid-area: 1/1/2/2;
justify-self: center;
align-self: end;
z-index: 2;
}
.carousel .sl-description {
grid-area: 2/1/3/2;
justify-self: center;
align-self: center;
z-index: 2;
text-align: center;
max-width: 50%;
opacity: 0;
}
.carousel .sl-url {
grid-area: 1/1/4/2;
display: none;
z-index: 3;
}
.carousel .controls {
grid-area: 3/1/4/2;
z-index: 4;
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
}
.carousel .checker {
display: none;
}
.carousel .sl-title {
opacity: 0;
background-color: rgba(255, 255, 255, 0.35);
font-size: 3em;
border-top: solid;
border-bottom: solid;
border-color: #23a2d4;
}
.carousel .sl-description {
opacity: 0;
background-color: rgba(255, 255, 255, 0.51);
font-size: 1.5em;
border-top: solid;
border-bottom: solid;
border-color: #23a2d4;
}
.carousel .controls label {
padding-bottom: 1em;
text-transform: uppercase;
font-size: 1em;
color: #b6f6f6;
font-weight: 600;
cursor: pointer;
}
.carousel .controls label span {
font-size: 1.5em;
font-weight: 800;
}
.carousel .controls .progressbar {
height: 4px;
width: 150px;
background: #b6f6f6;
}
.progressbar-fill {
height: 4px;
width: 0;
background: #23a2d4;
}
#banner1:checked ~ .controls label:nth-of-type(1) .progressbar-fill,
#banner2:checked ~ .controls label:nth-of-type(2) .progressbar-fill,
#banner3:checked ~ .controls label:nth-of-type(3) .progressbar-fill,
#banner4:checked ~ .controls label:nth-of-type(4) .progressbar-fill {
-webkit-animation: progressBarFill 5s linear;
}
#banner1:checked ~ .controls label:nth-of-type(1),
#banner2:checked ~ .controls label:nth-of-type(2),
#banner3:checked ~ .controls label:nth-of-type(3),
#banner4:checked ~ .controls label:nth-of-type(4) {
color: #23a2d4;
}
#banner1:hover ~ .controls label:nth-of-type(1),
#banner2:hover ~ .controls label:nth-of-type(2),
#banner3:hover ~ .controls label:nth-of-type(3),
#banner4:hover ~ .controls label:nth-of-type(4) {
color: #23a2d4;
transition: all .3s;
}
#banner1:checked ~ #slide1 img,
#banner2:checked ~ #slide2 img,
#banner3:checked ~ #slide3 img,
#banner4:checked ~ #slide4 img,
#banner5:checked ~ #slide5 img{
opacity: 1;
transition: all .7s ease;
}
#banner1:checked ~ #sl-title1,
#banner2:checked ~ #sl-title2,
#banner3:checked ~ #sl-title3,
#banner4:checked ~ #sl-title4,
#banner5:checked ~ #sl-title5 {
opacity: 1;
}
#banner1:checked ~ #sl-url1,
#banner2:checked ~ #sl-url2,
#banner3:checked ~ #sl-url3,
#banner4:checked ~ #sl-url4,
#banner5:checked ~ #sl-url5 {
display: inline;
}
#banner1:checked ~ #sl-description1,
#banner2:checked ~ #sl-description2,
#banner3:checked ~ #sl-description3,
#banner4:checked ~ #sl-description4,
#banner5:checked ~ #sl-description5 {
opacity: 1;
}
@-webkit-keyframes progressBarFill {
from {
width: 0;
}
to {
width: 100%;
}
}
/* ========================================= */
/* ==============INFO-BLOCK================= */
/* ========================================= */
/* ---------------GRID SYSTEM--------------- */
.info-img {
grid-area: 2/2/3/3;
}
.info-text {
grid-area: 2/3/3/5;
}
/*!* -------------------Image------------------ *!*/
.info-img {
background-color: #000;
font-size: 17px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.info-img,
.info-img .imgelem:before {
/*-webkit-box-sizing: border-box;*/
/*box-sizing: border-box;*/
-webkit-transition: opacity .3s linear, right .3s linear;
-moz-transition: opacity .3s linear, right .3s linear;
-o-transition: opacity .3s linear, right .3s linear;
transition: opacity .3s linear, right .3s linear;
}
.info-img img {
backface-visibility: hidden;
width: 100%;
height: 100%;
vertical-align: top;
}
.info-img .imgelem {
bottom: 30px;
left: 0;
position: absolute;
z-index: 0;
}
.info-img .imgelem:before {
background-color: #23a2d4;
bottom: -5px;
content: '';
left: 0;
position: absolute;
right: 100%;
top: -5px;
z-index: -1;
}
.info-img h3 {
background-color: rgba(255, 255, 255, 0.76);
color: #23a2d4;
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 5px 10px;
text-transform: uppercase;
z-index: 1;
}
.info-img a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.info-img:hover > img {
opacity: 0.1;
}
.info-img:hover .imgelem:before {
right: -5px;
}
/*!* ---------------TEXT---------------- *!*/
.info-text {
border-top: solid;
border-bottom: solid;
border-color: #23a2d4;
background-color: rgba(255, 255, 255, 0.76);
margin-left: 20px;
padding-top: 20%;
font-size: 1.6em;
text-align: center;
}
/*!* ========================================= *!*/
/*!* ================PARTNERS================= *!*/
/*!* ========================================= *!*/
/*!* ----------------GRID--------------------- *!*/
.partners {
grid-area: 3/2/4/5;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: auto;
grid-row-gap: 20px;
}
.partners .in {
grid-area: 1/1/2/2;
display: inline-grid;
grid-template-rows: 0.5fr 1fr;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
}
.partners .out {
grid-area: 2/1/3/2;
display: inline-grid;
grid-template-rows: 0.5fr 1fr;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
}
/*!* -------------------STYLE-------------------- *!*/
.partners .in .in-title,
.partners .out .out-title {
grid-area: 1/1/2/6;
align-self: center;
font-size: 1.5em;
border-bottom: solid;
border-color: #23a2d4;
}
.partners .in img,
.partners .out img {
max-height: 100px;
max-width: 100px;
}
Js for main page (don't waste time on reading all this. I just used Julian Laval's particle animation):
!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&(this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(a){this.p.x=a.clientX-this.canvas.offsetLeft,this.p.y=a.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(a){this.p.velocity={x:(Math.random()-.5)*this.options.velocity,y:(Math.random()-.5)*this.options.velocity},this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},b.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=1;for(var a=0;a<this.o.length;a++){this.o[a].update(),this.o[a].h();for(var b=this.o.length-1;b>a;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b});
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#000000',
background: '#636363',
interactive: true,
speed: 'medium',
density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);
And the last one - js for index page (just a little slides switcher):
function bannerSwitcher() {
next = $('.checker').filter(":checked").next('.checker');
if (next.length) next.prop('checked', true);
else $('.checker').first().prop('checked', true);
}
var bannerTimer = setInterval(bannerSwitcher, 5000);
$('.controls label').click(function() {
clearInterval(bannerTimer);
bannerTimer = setInterval(bannerSwitcher, 5000)
});