CSS3动画后的iOS右侧空白(iOS right side whitespace after CSS3 animation)
在网站https://swap-n-sell.com上，右侧是iOS上的空白区域。 在其他浏览器中它工作。 当我打开侧边栏并使用左上角的按钮将其关闭时，会出现空白：
侧边栏使用CSS3动画打开/关闭。 关闭之后，我在这个空白的右侧：
我用Webinspector检查了它并添加了margin-right: 0%; 对身体。 突然间，空白被移除了，但当我再次打开侧边栏时，空白也在那里。 也许视图不刷新或类似我不知道的东西。 谢谢你的帮助。
On the website https://swap-n-sell.com does the right side get a whitespace on iOS. In other browser it works. The whitespace appears when I open the sidebar and close it with the button on the top left corner:
The sidebar opens/closes with a CSS3 animation. After it's closed I get on the right side this whitespace:
I inspected it with the Webinspector and added margin-right: 0%; to the body. Suddenly the whitespace was removed but when I opened the sidebar again then the whitespace was also again there. Maybe the view doesn't refresh or something like that I don't know. Thanks for your help.
原文：https://stackoverflow.com/questions/31558722
更新时间：2020-06-18 13:06
最满意答案
您的叠加层在CSS中具有以下值：
height: 3799px;
width: 1280px;
导航再次关闭后会删除这些值吗？
另外一点：我感觉网站正在测量我的视口，然后将这些值添加到CSS中。 因此，当我调整浏览器窗口大小时，叠加层将保持相同的宽度，从而导致大量问题(例如，我无法再关闭导航)。 我不知道iOS设备的视口的值是否会以正确的方式计算。 可能是设备宽度而不是视口宽度？
Your overlay has those values in the CSS:
height: 3799px;
width: 1280px;
Will those values be removed after the navigation has been closed again?
On a different note: I get the feeling that the site is measuring my viewport and then adds those values to the CSS. So when I resize my browser-window, the overlay will stay the same width causing massive issues (for example I can't close the navigation anymore). I don't know if the values for the viewport of an iOS device will be computed the right way. May be it's the device-width and not viewport-width?
相关问答
是的，您可以使用0％，25％等增量并链接整个动画。 看看这个小提琴 。 我所做的是使用增量网来使动画成为一个大链。 @-webkit-keyframes move {
0% {top: 100px;
left: 100px;
-webkit-transform: rotate(135deg);}
25% {top: 250px;
left: 250px;
-webkit-transform: rotate(135deg);}
50% {t
...
你的代码看起来不错。 您可以运行以下代码以查看它是否正常工作： fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:for
...
我找到了解决方案 我创造了什么： 使用Javascript $('.class').addClass('blink');
$('.class').on('webkitTransitionEnd', function() {
$(.class).addClass('paused');
...
iOS3上的CSS3过渡速度要快得多，应该尽可能地使用，而不是旧的做事方式。 如果将转换与转换组合在一起，则可以获得硬件加速的好处，这意味着动画非常流畅，尤其是当许多动画同时发生时。 当然，您需要对其进行测试才能看到，但编写一个允许您抽象出来的函数相当容易。 这是我写的一段时间 - 不是最伟大的，但这是一个简单的方式开始： http ： //css3.bradshawenterprises.com/legacy/ CSS3 transitions are massively faster on i
...
您的叠加层在CSS中具有以下值： height: 3799px;
width: 1280px;
导航再次关闭后会删除这些值吗？ 另外一点：我感觉网站正在测量我的视口，然后将这些值添加到CSS中。 因此，当我调整浏览器窗口大小时，叠加层将保持相同的宽度，从而导致大量问题(例如，我无法再关闭导航)。 我不知道iOS设备的视口的值是否会以正确的方式计算。 可能是设备宽度而不是视口宽度？ Your overlay has those values in the CSS: height: 3799px;
...
你可以使用Checkbox Hack来实现它，尽管通常不鼓励它。 不过可能值得一试。 这是一个有趣的使用html和CSS。 编辑 经过一段时间的游戏后，我想出了这个例子。 最难的部分实际上是在没有javascript的情况下重置动画，而不是注册click事件。 为了解决这个问题，我将动画复制到第二个css规则，该规则从复选框开始时开始。 可能有更好的方法来做到这一点，但理论上这可行，除了有点不同寻常:) You could do it with the Checkbox Hack though i
...
关键帧的组织可能不同吗？ #najava {
width: 197px;
height: 22px;
border-radius: 2px;
background-color: transparent;
opacity: 0.8;
font-weight: bold;
position: relative;
padding-left: 5px;
padding-right: 5px;
animat
...
在功能区周围添加div并将动画css应用于它而不是h1元素应该解决这个问题。 HTML：
Everybody loves ribbons
CSS： .container {
animation: flyRibbon 30s linear infinite;
-
...
最简单的方法可能是在每个屏幕外页面上添加另一个类，例如.left和.right ，将页面放在屏幕之外，可以使用left: CSS属性。 要将页面带到屏幕上，您将删除.left类并将其更改为.current 。 要为转换设置动画，您需要在.page类上使用CSS规则，例如： -webkit-transition: left 1s linear;
The simplest way is probably to add another class to each offscreen page, suc
...
您可以尝试在div上使用JQuery动画(在您的情况下为高度，宽度)，以便您可以选择要设置动画的特定元素 Now it works: http://jsfiddle.net/fiddly/FwHZn/1/ I had to set the width of the "p"-tag. Otherwise the animation will be applied on the div and on the p tag.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
