我正在尝试使用sass创建一个漂亮的导航菜单，它一切正常并且动画效果很好，但是一旦我在纵向模式下测试移动版本（运行iPhone4S），字体很棒就没有＃39 ; t加载？如果我切换到横向然后回到肖像，它会自行修复，但我无法找出问题的来源？
HTML
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-linkedin"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-twitter"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
<feComposite media="screen and (max-width: 700px) and (orientation: portrait)" in2="shadow" in="goo" result="goo" />
<feComposite media="screen and (max-width: 700px) and (orientation: portrait)" in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
CSS
.menu {
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
}
.menu-item, .menu-open-button {
background: #434343;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item:hover {
background: white;
color: #434343;
}
.menu-item:nth-child(3) {
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
transition-duration: 190ms;
}
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 160ms;
-webkit-transform: translate3d(59.86896px, 25.31219px, 0);
transform: translate3d(59.86896px, 25.31219px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 240ms;
-webkit-transform: translate3d(0.05176px, 64.99998px, 0);
transform: translate3d(0.05176px, 64.99998px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 320ms;
-webkit-transform: translate3d(-59.82858px, 25.40751px, 0);
transform: translate3d(-59.82858px, 25.40751px, 0);
}
@media only screen and (max-width: 700px) and (orientation: portrait) {
.menu-item, .menu-open-button {
width: 60px;
height: 60px;
top: 20px;
line-height: 60px;
}
.menu {
padding-top: 0px;
padding-left: 25%;
font-size: 20px;
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 170ms;
-webkit-transform: translate3d(80px, 0, 0);
transform: translate3d(80px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 250ms;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 330ms;
-webkit-transform: translate3d(240px, 0, 0);
transform: translate3d(240px, 0, 0);
}
}
/*# sourceMappingURL=menu.css.map */