I created a speedometer that works very well and is to light (with CSS3,html and js code). But i noticed a strange bug with iphone....
This is the CODE:
$('#first').addClass('first-start'); //SECOND BAR $('#second').addClass('second-start'); setTimeout(function() { $('#second').addClass('second-pause'); }, 400);#page { margin-top: 50px; width: 300px; height: 300px; background-color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 4; overflow: hidden; } #box-first, #box-second { width: 200px; height: 100px; background-color: #fff; border-radius: 200px 200px 0 0; margin-top: 10px; margin-bottom: 10px; position: relative; display: flex; justify-content: flex-end; align-items: flex-start; z-index: 3; overflow: hidden; } #first, #second { border-radius: 200px 200px 0 0; margin: 0; background: red; width: 200px; height: 100px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; position: absolute; top: 0px; right: 0px; border: 0; z-index: 1; } #n1, #n2 { font-size: 20px; color: #fff; font-weight: bold; position: absolute; left: 50px; right: 0; text-align: center; top: 50px; bottom: 0; display: flex; align-items: flex-end; justify-content: center; width: 100px; height: 50px; background: #000; border-radius: 100px 100px 0 0; z-Index: 1; overflow: hidden; } @keyframes first { 0% { background-color: green; transform: rotate(180deg); } 33% { background-color: yellow; transform: rotate(240deg); } 66% { background-color: orange; transform: rotate(300deg); } 100% { background-color: red; transform: rotate(360deg); } } @keyframes second { 0% { background-color: green; transform: rotate(180deg); } 33% { background-color: yellow; transform: rotate(240deg); } 66% { background-color: orange; transform: rotate(300deg); } 100% { background-color: red; transform: rotate(360deg); } } .first-start, .second-start { animation: first 2s linear forwards; } .first-pause, .second-pause { animation-play-state: paused; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="page"> <div id="box-first"> <div id="first"></div> <div id="n1">1500</div> </div> <div id="box-second"> <div id="second"></div> <div id="n2">270</div> </div> </div>With iphone, so with safari, under (at the bottom side) div #n1 (the black div where there's number 1500) is visible a small white border or sometimes red (like #first). And this is impossible because the container has overflow: hidden, all divs have different z-Index and the absolute position of #n1 is correct.
How is possibile ?
Thanks and sorry for my english
This is the jsfiddle: This is jsfiddle: https://jsfiddle.net/k85t9zgq/33/
This is a bug's screenshot: 
2 Answers
Answers 1
I cannot test this, but I am pretty sure it's related to the fact that background use background-clip border-box by default and this is somehow a rendring issue. A potential fix is to make the background far from the border by adding a small padding and adjusting background-clip
$('#first').addClass('first-start'); //SECOND BAR $('#second').addClass('second-start'); setTimeout(function() { $('#second').addClass('second-pause'); }, 400);#page { margin-top: 50px; width: 300px; height: 300px; background-color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 4; overflow: hidden; } #box-first, #box-second { width: 200px; height: 100px; /* Changes*/ background: linear-gradient(#fff,#fff) content-box; padding:1px; box-sizing:border-box; /**/ border-radius: 200px 200px 0 0; margin-top: 10px; margin-bottom: 10px; position: relative; display: flex; justify-content: flex-end; align-items: flex-start; z-index: 3; overflow: hidden; } #first, #second { border-radius: 200px 200px 0 0; margin: 0; background: red; width: 200px; height: 100px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; position: absolute; top: 0px; right: 0px; border: 0; z-index: 1; } #n1, #n2 { font-size: 20px; color: #fff; font-weight: bold; position: absolute; left: 50px; right: 0; text-align: center; top: 50px; bottom: 0; display: flex; align-items: flex-end; justify-content: center; width: 100px; height: 50px; background: #000; border-radius: 100px 100px 0 0; z-Index: 1; overflow: hidden; } @keyframes first { 0% { background-color: green; transform: rotate(180deg); } 33% { background-color: yellow; transform: rotate(240deg); } 66% { background-color: orange; transform: rotate(300deg); } 100% { background-color: red; transform: rotate(360deg); } } @keyframes second { 0% { background-color: green; transform: rotate(180deg); } 33% { background-color: yellow; transform: rotate(240deg); } 66% { background-color: orange; transform: rotate(300deg); } 100% { background-color: red; transform: rotate(360deg); } } .first-start, .second-start { animation: first 2s linear forwards; } .first-pause, .second-pause { animation-play-state: paused; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="page"> <div id="box-first"> <div id="first"></div> <div id="n1">1500</div> </div> <div id="box-second"> <div id="second"></div> <div id="n2">270</div> </div> </div>Answers 2
I believe it's your border-radius property on #first and #second - Play around with the values on it and you will totally see what I mean.
Change this:
#first, #second { border-radius: 200px 200px 0 0; /* ← CHANGE THIS */ margin: 0; background: red; width: 200px; /* ← CHANGE THIS TOO */ height: 100px; transform: rotate(180deg); transform-origin: 50% 100%; position: absolute; top: 0px; right: 0px; border: 0; z-index: 1; } to:
#first, #second { border-radius: 0; /* ← THIS IS WHAT YOU WANT */ margin: 0; background: red; width: 100%; /* ← THIS IS ALSO WHAT YOU WANT */ height: 100px; transform: rotate(180deg); transform-origin: 50% 100%; position: absolute; top: 0px; right: 0px; border: 0; z-index: 1; } That faint white/gray line around your speedometer is no longer present.
Cheers and Happy coding :)
0 comments:
Post a Comment