История изменений
Исправление firkax, (текущая версия) :
html/css для воспроизведения проблемы (скорее всего почти все оставшиеся css тоже не влияют, но там муторно их по одному выяснять). js, как оказалось, полностью ни при чём
Что точно влияет:
1) если убрать style='font-size:28px;text-shadow:0px 1px 4px #000' - лаги исчезают
2) если убрать id="loader" и id="loading" - лаги тоже исчезают
3) если убрать только id="loader" - лаги почти исчезают
4) если убрать только id="loading" - лагов становится чуть меньше (не уверен, может показалось)
5) чем больше площади занимает текст внизу - тем сильнее лаги
6) если сделать очень много текста то подлагивать начинает даже мозилловский фф, но дебиановский при этом вообще меньше 1 фпс выдаёт
Подозреваю что лаги получаются если одновременно есть text-shadow и пачка css-анимаций.
<!DOCTYPE html>
<html>
<head>
<style>
/* reset CSS */
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
color:#fff;
background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
overflow:hidden;
}
#loader {
position:relative;
padding:32px;
padding-top:110px;
animation-name:appear;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:0.5s;
}
@keyframes appear {
from {opacity:0;top:20px;}
to {opacity:1;top:0px;}
}
#loading {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;
}
.blinking{animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;}
@keyframes blink {
0% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0.5;}
}
#failedToLoad {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
animation-name:appearLater;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:15s;
}
@keyframes appearLater {
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}
}
.spinnyBig,.spinnySmall {
display:block;
width:100px;
height:100px;
position:absolute;
left:50%;
top:0px;
margin-left:-50px;
animation-name:loadSpin;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.spinnyBig {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnyBig.png);
animation-duration:5s;
}
.spinnySmall {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnySmall.png);
animation-duration:9s;
}
@keyframes loadSpin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.crisp {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
body{scrollbar-color:#bbb #111;}
/*show scrollbars in safari*/
::-webkit-scrollbar {
-webkit-appearance:none;
width:17px;
}
::-webkit-scrollbar-track {
background-color:#111;
}
::-webkit-scrollbar-thumb {
background-color:#bbb;
border:2px solid #111;
box-shadow:0px 0px 0px 1px #eee inset;
}
/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy * {
text-shadow:none!important;
box-shadow:none!important;
}
.noFancy .price {
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters * {
filter:none!important;
-webkit-filter:none!important;
}
/**{overflow:hidden!important;}*/
</style>
</head>
<body>
<div id="loader">
<div class="spinnyBig"></div>
<div class="spinnySmall"></div>
<div id="loading" style='font-size:28px;text-shadow:0px 1px 4px #000'>Loading...</div>
<div style='font-size:28px;text-shadow:0px 1px 4px #000'>This is taking longer than expected.<br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div></div>
</div>
</body>
</html>
Исправление firkax, :
html/css для воспроизведения проблемы (скорее всего почти все оставшиеся css тоже не влияют, но там муторно их по одному выяснять). js, как оказалось, полностью ни при чём
Что точно влияет:
1) если убрать style='font-size:28px;text-shadow:0px 1px 4px #000' - лаги исчезают
2) если убрать id="loader" и id="loading" - лаги тоже исчезают
3) если убрать только id="loader" - лаги почти исчезают
4) если убрать только id="loading" - лагов становится чуть меньше (не уверен, может показалось)
5) чем больше площади занимает текст внизу - тем сильнее лаги
6) если сделать очень много текста то подлагивать начинает даже мозилловский фф, но дебиановский при этом вообще меньше 1 фпс выдаёт
<!DOCTYPE html>
<html>
<head>
<style>
/* reset CSS */
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
color:#fff;
background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
overflow:hidden;
}
#loader {
position:relative;
padding:32px;
padding-top:110px;
animation-name:appear;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:0.5s;
}
@keyframes appear {
from {opacity:0;top:20px;}
to {opacity:1;top:0px;}
}
#loading {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;
}
.blinking{animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;}
@keyframes blink {
0% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0.5;}
}
#failedToLoad {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
animation-name:appearLater;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:15s;
}
@keyframes appearLater {
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}
}
.spinnyBig,.spinnySmall {
display:block;
width:100px;
height:100px;
position:absolute;
left:50%;
top:0px;
margin-left:-50px;
animation-name:loadSpin;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.spinnyBig {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnyBig.png);
animation-duration:5s;
}
.spinnySmall {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnySmall.png);
animation-duration:9s;
}
@keyframes loadSpin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.crisp {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
body{scrollbar-color:#bbb #111;}
/*show scrollbars in safari*/
::-webkit-scrollbar {
-webkit-appearance:none;
width:17px;
}
::-webkit-scrollbar-track {
background-color:#111;
}
::-webkit-scrollbar-thumb {
background-color:#bbb;
border:2px solid #111;
box-shadow:0px 0px 0px 1px #eee inset;
}
/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy * {
text-shadow:none!important;
box-shadow:none!important;
}
.noFancy .price {
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters * {
filter:none!important;
-webkit-filter:none!important;
}
/**{overflow:hidden!important;}*/
</style>
</head>
<body>
<div id="loader">
<div class="spinnyBig"></div>
<div class="spinnySmall"></div>
<div id="loading" style='font-size:28px;text-shadow:0px 1px 4px #000'>Loading...</div>
<div style='font-size:28px;text-shadow:0px 1px 4px #000'>This is taking longer than expected.<br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div></div>
</div>
</body>
</html>
Исправление firkax, :
html/css для воспроизведения проблемы (скорее всего почти все оставшиеся css тоже не влияют, но там муторно их по одному выяснять). js, как оказалось, полностью ни при чём
Что точно влияет:
1) если убрать style='font-size:28px;text-shadow:0px 1px 4px #000' - лаги исчезают
2) если убрать id="loader" и id="loading" - лаги тоже исчезают
3) если убрать только id="loader" - лаги почти исчезают
4) если убрать только id="loading" - лагов становится чуть меньше (не уверен, может показалось)
5) чем больше площади занимает текст внизу - тем сильнее лаги
6) если сделать очень много текста то подлагивать начинает даже мозилловский фф, но дебиановский при этом вообще меньше 1 фпс выдаёт
<!DOCTYPE html>
<html>
<head>
<style>
/* reset CSS */
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
color:#fff;
background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
overflow:hidden;
}
#loader {
position:relative;
padding:32px;
padding-top:110px;
animation-name:appear;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:0.5s;
}
@keyframes appear {
from {opacity:0;top:20px;}
to {opacity:1;top:0px;}
}
#loading {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;
}
.blinking{animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;}
@keyframes blink {
0% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0.5;}
}
#failedToLoad {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
animation-name:appearLater;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:15s;
}
@keyframes appearLater {
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}
}
.spinnyBig,.spinnySmall {
display:block;
width:100px;
height:100px;
position:absolute;
left:50%;
top:0px;
margin-left:-50px;
animation-name:loadSpin;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.spinnyBig {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnyBig.png);
animation-duration:5s;
}
.spinnySmall {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnySmall.png);
animation-duration:9s;
}
@keyframes loadSpin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.crisp {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
body{scrollbar-color:#bbb #111;}
/*show scrollbars in safari*/
::-webkit-scrollbar {
-webkit-appearance:none;
width:17px;
}
::-webkit-scrollbar-track {
background-color:#111;
}
::-webkit-scrollbar-thumb {
background-color:#bbb;
border:2px solid #111;
box-shadow:0px 0px 0px 1px #eee inset;
}
/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy * {
text-shadow:none!important;
box-shadow:none!important;
}
.noFancy .price {
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters * {
filter:none!important;
-webkit-filter:none!important;
}
/**{overflow:hidden!important;}*/
</style>
</head>
<body>
<div id="loader">
<div class="spinnyBig"></div>
<div class="spinnySmall"></div>
<div id="loading" style='font-size:28px;text-shadow:0px 1px 4px #000'>Loading...</div>
<div style='font-size:28px;text-shadow:0px 1px 4px #000'>This is taking longer than expected.<br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div></div>
</div>
</body>
</html>
Исправление firkax, :
html/css для вопсроизведения проблемы (скорее всего почти все оставшиеся css тоже не влияют, но там муторно их по одному выяснять). js, как оказалось, полностью ни при чём
Что точно влияет:
1) если убрать style='font-size:28px;text-shadow:0px 1px 4px #000' - лаги исчезают
2) если убрать id="loader" и id="loading" - лаги тоже исчезают
3) если убрать только id="loader" - лаги почти исчезают
4) если убрать только id="loading" - лагов становится чуть меньше (не уверен, может показалось)
5) чем больше площади занимает текст внизу - тем сильнее лаги
6) если сделать очень много текста то подлагивать начинает даже мозилловский фф, но дебиановский при этом вообще меньше 1 фпс выдаёт
<!DOCTYPE html>
<html>
<head>
<style>
/* reset CSS */
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
color:#fff;
background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
overflow:hidden;
}
#loader {
position:relative;
padding:32px;
padding-top:110px;
animation-name:appear;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:0.5s;
}
@keyframes appear {
from {opacity:0;top:20px;}
to {opacity:1;top:0px;}
}
#loading {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;
}
.blinking{animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;}
@keyframes blink {
0% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0.5;}
}
#failedToLoad {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
animation-name:appearLater;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:15s;
}
@keyframes appearLater {
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}
}
.spinnyBig,.spinnySmall {
display:block;
width:100px;
height:100px;
position:absolute;
left:50%;
top:0px;
margin-left:-50px;
animation-name:loadSpin;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.spinnyBig {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnyBig.png);
animation-duration:5s;
}
.spinnySmall {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnySmall.png);
animation-duration:9s;
}
@keyframes loadSpin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.crisp {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
body{scrollbar-color:#bbb #111;}
/*show scrollbars in safari*/
::-webkit-scrollbar {
-webkit-appearance:none;
width:17px;
}
::-webkit-scrollbar-track {
background-color:#111;
}
::-webkit-scrollbar-thumb {
background-color:#bbb;
border:2px solid #111;
box-shadow:0px 0px 0px 1px #eee inset;
}
/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy * {
text-shadow:none!important;
box-shadow:none!important;
}
.noFancy .price {
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters * {
filter:none!important;
-webkit-filter:none!important;
}
/**{overflow:hidden!important;}*/
</style>
</head>
<body>
<div id="loader">
<div class="spinnyBig"></div>
<div class="spinnySmall"></div>
<div id="loading" style='font-size:28px;text-shadow:0px 1px 4px #000'>Loading...</div>
<div style='font-size:28px;text-shadow:0px 1px 4px #000'>This is taking longer than expected.<br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div></div>
</div>
</body>
</html>
Исходная версия firkax, :
html/css для вопсроизведения проблемы (скорее всего почти все оставшиеся css тоже не влияют, но там муторно их по одному выяснять).
Что точно влияет:
1) если убрать style='font-size:28px;text-shadow:0px 1px 4px #000' - лаги исчезают
2) если убрать id="loader" и id="loading" - лаги тоже исчезают
3) если убрать только id="loader" - лаги почти исчезают
4) если убрать только id="loading" - лагов становится чуть меньше (не уверен, может показалось)
5) чем больше площади занимает текст внизу - тем сильнее лаги
6) если сделать очень много текста то подлагивать начинает даже мозилловский фф, но дебиановский при этом вообще меньше 1 фпс выдаёт
<!DOCTYPE html>
<html>
<head>
<style>
/* reset CSS */
html, body, div {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
html,body {
width:100%;
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
color:#fff;
background:#000 url(img/darkNoise.jpg);
font-family:Tahoma,Arial,sans-serif;
font-size:13px;
overflow:hidden;
}
#loader {
position:relative;
padding:32px;
padding-top:110px;
animation-name:appear;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:0.5s;
}
@keyframes appear {
from {opacity:0;top:20px;}
to {opacity:1;top:0px;}
}
#loading {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #39f;
animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;
}
.blinking{animation-name:blink;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
animation-duration:0.75s;}
@keyframes blink {
0% {opacity:0.5;}
50% {opacity:1;}
100% {opacity:0.5;}
}
#failedToLoad {
text-shadow:0px 0px 3px rgba(255,255,255,0.5),0px 0px 20px #f33;
animation-name:appearLater;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-duration:15s;
}
@keyframes appearLater {
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}
}
.spinnyBig,.spinnySmall {
display:block;
width:100px;
height:100px;
position:absolute;
left:50%;
top:0px;
margin-left:-50px;
animation-name:loadSpin;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
}
.spinnyBig {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnyBig.png);
animation-duration:5s;
}
.spinnySmall {
background:url(https://orteil.dashnet.org/cookieclicker/img/spinnySmall.png);
animation-duration:9s;
}
@keyframes loadSpin {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.crisp {
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
body{scrollbar-color:#bbb #111;}
/*show scrollbars in safari*/
::-webkit-scrollbar {
-webkit-appearance:none;
width:17px;
}
::-webkit-scrollbar-track {
background-color:#111;
}
::-webkit-scrollbar-thumb {
background-color:#bbb;
border:2px solid #111;
box-shadow:0px 0px 0px 1px #eee inset;
}
/*=====================================================================================
STOP THE FANCY
=======================================================================================*/
.noFancy * {
text-shadow:none!important;
box-shadow:none!important;
}
.noFancy .price {
text-shadow:0px 0px 4px #000,0px 1px 0px #000!important;
}
.noFilters * {
filter:none!important;
-webkit-filter:none!important;
}
/**{overflow:hidden!important;}*/
</style>
</head>
<body>
<div id="loader">
<div class="spinnyBig"></div>
<div class="spinnySmall"></div>
<div id="loading" style='font-size:28px;text-shadow:0px 1px 4px #000'>Loading...</div>
<div style='font-size:28px;text-shadow:0px 1px 4px #000'>This is taking longer than expected.<br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div><br>
<div>Slow connection? If not, please make sure your javascript is enabled, then refresh.<br>
If problems persist, this might be on our side - wait a few minutes, then hit ctrl+f5!</div></div>
</div>
</body>
</html>