当我在Microsoft Edge中打开我的网站时，一切看起来都很好，除了徽标的左侧没有与右侧保持时间 - B进入顺畅，但是S时间略微落后，非常生涩。刷新了几次，它总是完全一样。此外，如果我向下滚动并向后返回到Edge的顶部，则S有时仅部分绘制（即，它的底部缺失），即使它在我第一次打开页面时完全绘制。
@keyframes bounce-in {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
#logo {
animation: bounce-in 700ms ease-in-out forwards;
margin-bottom: 20px;
max-height: 70vh;
}
.s {
transform-origin: 50% 50%;
stroke-dasharray: 128px;
stroke-dashoffset: -128px;
animation: draw-s 1500ms 500ms forwards;
}
.b-back {
transform-origin: 50% 50%;
stroke-dasharray: 93px;
stroke-dashoffset: -93px;
animation: draw-b-back 1500ms 500ms forwards;
}
.b-front-2 {
transform-origin: 50% 50%;
stroke-dasharray: 124px;
animation: draw-b-front 1500ms 500ms forwards;
transform: translateX(-0.2px);
}
.logo-shadow {
opacity: 0;
animation: draw-shadow 1s ease 1500ms forwards;
}
@keyframes draw-s {
from {
stroke-dashoffset: 128px;
}
to {
stroke-dashoffset: 0px;
}
}
@keyframes draw-b-back {
from {
stroke-dashoffset: 93px;
}
to {
stroke-dashoffset: 0px;
}
}
@keyframes draw-b-front {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: 124px;
}
}
@keyframes draw-shadow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.8 120.8">
<style>
.logo-circle {
fill: #3BB383;
}
.logo-shadow {
fill: #349F74;
}
.logo-text {
fill: none;
stroke: #FFFFFF;
stroke-width: 8;
stroke-miterlimit: 10;
}
.logo-text-2 {
fill: none;
stroke: #3BB383;
stroke-width: 9;
stroke-miterlimit: 10;
}
</style>
<path class="logo-circle" d="M117.8 60.3c.1 31.1-25.1 56.4-56.3 56.5-31.1.1-56.4-25.1-56.5-56.3C4.9 29.4 30.1 4.1 61.3 4c31.1-.1 56.4 25.1 56.5 56.3z" />
<path class="logo-shadow" d="M117.4 53.6L84.5 20.7l-.8.8c-5.2-5.7-13.3-9.7-22.1-9.7-15.8 0-28.4 12.1-28.4 26.5 0 8.9-.1 17.7 7.3 22.4L39 66.2c.5.5 1 1.1 1.4 1.9 1.9 3.9 7.4 5.5 10.2 8.8 4.3 5 4.5 11.6 4.4 17.8-.1 8.2-11.4 9.1-13.9 2.7-.6-.7-1-1.5-1.2-2.4-1.1 2.4-1.4 5.8-4.2 5.9l14.8 14.9c3.5.7 7.2 1 10.9 1 31.1-.1 56.3-25.4 56.3-56.5.1-2.3-.1-4.5-.3-6.7z"
/>
<path class="logo-text s" d="M60.6 15.8c-12 0-27.7 10.6-27.7 29.3C32.9 64 52.3 72 55.6 84.5c3 11.3-2 16.3-5 17.3-6 2-12-3-14-6" />
<path class="logo-text b-front" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text-2 b-front-2" d="M62.6 104.8s20 0 22.5-13.4c2.1-11.5-3.9-19.7-3.9-19.7s10.4-8.4 10.4-24c0-25.2-21-31.8-29-31.8" />
<path class="logo-text b-back" d="M66.6 14.6v92.2" />
</svg>
此外，图形/圆圈动画可以正常工作，但它们与Chrome中的功能完全不同。在Chrome中，圆圈在到达最终位置之前会完整旋转360度，在Edge中它们只是从顶部移动到最终位置（即仅转动270°，180°或90°）。
.graph {
margin: 20px auto;
transform: rotate(-90deg);
will-change: transform;
}
.graph-line {
stroke-dasharray: 628px;
stroke-dashoffset: -628px;
transform-origin: center;
}
.graph-25 {
animation: graph-25 1000ms ease forwards;
}
.graph-50 {
animation: graph-50 1000ms ease forwards;
}
.graph-75 {
animation: graph-75 1000ms ease forwards;
}
@keyframes graph-25 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 157px;
transform: rotate(0deg);
}
}
@keyframes graph-50 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 314px;
transform: rotate(0deg);
}
}
@keyframes graph-75 {
0% {
stroke-dashoffset: 0px;
transform: rotate(360deg);
}
100% {
stroke-dashoffset: 471px;
transform: rotate(0deg);
}
}<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<div class="large-4 column align">
<svg width="250" height="250" class="graph photoshop">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#2ECBE4" />
<circle class="graph-line ps graph-75" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large-4 column align">
<svg width="250" height="250" class="graph illustrator">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#EA954A" />
<circle class="graph-line ai graph-50" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
<div class="large- column align">
<svg width="250" height="250" class="graph sketch">
<circle class="graph-line-2 top" cx="50%" cy="50%" r="100" stroke-width="20" fill="none" stroke="#F4D24B" />
<circle class="graph-line sk graph-25" cx="50%" cy="50%" r="100" stroke-width="22" fill="none" stroke="#fff" opacity="0.92" />
</svg>
</div>
任何人都知道如何解决这些问题？
以下是网站：http://seanbaines.com