假设你试图为这样的tilable背景设置动画:
.container {
width: 160px;
height: 91px;
}
.bg {
width: 100%;
height: 100%;
background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
background-size: contain;
-webkit-animation: displace 2s linear infinite;
animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}
@keyframes displace {
from {
background-position: 0 center;
}
to {
background-position: 160px center;
}
}<div class="container">
<textarea class="bg"></textarea>
</div>只要更改容器的尺寸,循环动画就会中断!
有没有办法让没有JS的响应？
我已经遇到了Bootstraps navbar-fixed-top的一个错误,它带有iPhone 6 +在iOS 8上的移动野生动物园.这个错误只会在其他标签打开的情况下发生.
以下是如何复制它:
1)在横向上的iPhone 6+上访问http://getbootstrap.com/examples/navbar-fixed-top/ - 确保打开另一个选项卡
2)向下滚动页面打开崩溃
3)一旦Safari的状态栏(网址和标签)消失,打开导航栏
4)向上滚动以便Safari的状态栏带有标签,
5)尝试关闭导航栏.
我在iOS 7中遇到了这个错误,但是能够通过添加viewport minimal-ui meta来修复它.我已经测试了我的iPhone 6+,以及带有最新版iOS 8的6+ iPhone模拟器.由于普通iPhone 6没有这个问题,因为选项卡没有显示在状态栏上.我想这个bug不仅仅是Bootstrap,而是适用于顶部的任何固定元素.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="to-sticky navbar-fixed-top">
<div class="nav-container">
<div class="navbar">
<div class="navbar-header">
<a type="button" class="navbar-toggle btn-secondary btn" data-toggle="collapse" data-target=".navbar-ex1-collapse">
Main Menu
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" role="menubar">
<!--unless submenu-->
<li class="active nav-home first-li ">
<a href="/" role="menuitem">Home</a>
</li>
<li class="nav-dot nav-home">
<img src="http://assets-production-webvanta-com.s3-us-west-2.amazonaws.com/000000/51/21/original/images/dot.png" alt="" role="presentation">
</li>
<!--if submenu-->
<li class="dropdown …