Css transition effects are very slow in chrome
First of all, sorry for my english.
I am creating a website using django 1.11. And, cc using css to make it look better. Also i decided to use css grid as layout system.
But CSS transition effects are very slow in a browser other than Firefox (only hover effect for links). Everything works fine in firefox. However, nothing works in other browsers. I have tested the latest versions of Opera, chrome.
The transition effects in chrome are very slow. In opera, he barely moves.
I've been trying to fix this for several days. I read about transitions, transformations, animations in CSS. But I still can't find where the problem is.
After all these days, I think this error is somewhere in the CSS grid because I reduced the number of nested grid containers and animations that played a little faster. The same thing happened when I just commented out some block (like a carousel). But still very slow.
Why does everything work fine in firefox? What can I do to fix this for other browsers? I cannot and do not want to release the buggy. Please show me where I went wrong.
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 the 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 the main page (don't waste time 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 is the js for the index page (just a small slider switch):
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)
});
+3
source to share
No one has answered this question yet
Check out similar questions: