Safari 5.1 上 Google 地图和 jQuery 动画的奇怪问题
我有一个带有 Google 地图的页面和我制作的使用简单水平动画的滑块。
一切工作正常，除了 Safari 5.1 (mac) 上的动画被搞砸了（它没有完全贯穿）。
我发现删除地图（加载了 API v3）可以解决这个问题。
我已经设置了一个 jsfiddle，以便您可以测试它： http://jsfiddle.net/tGRf6/29/< /a> （只需单击“下一步”即可运行滑块）
编辑 它可能与“重新绘制”之类的东西有关，因为我注意到调整窗口大小会使幻灯片就位。
I have a page with a Google map and a slider made by me that uses a simple horizontal animation.
Everything works fine except on Safari 5.1 (mac) where the animation is screwed up (it doesn't go all the way across).
I found out that removing the map (loaded with API v3) fixes the issue.
I've setup a jsfiddle so you can test it out: http://jsfiddle.net/tGRf6/29/
(simply click on "Next" to run the slider)
EDIT
It may have something to do with "repaint" and stuff like that, since I noticed that resizing the window brings the slide in place.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
对您的示例的此更新似乎适用于 Safari 5.1： http://jsfiddle.net/tGRf6/33/
从
div#slider中删除overflow:hidden修复了该问题。为了再次隐藏其他幻灯片元素，我在周围包裹了另一个并移动了Overflow:hidden属性从到新的（加上更多 CSS）。我仍然会（首先搜索然后）用您的 jsfiddle 示例发布错误报告，指出溢出：隐藏似乎以某种方式涉及。
希望这有帮助。
在提出这个潜在的解决方案之前（没有在 Safari 5.1 和 Firefox 7 之外的其他浏览器中进行测试），我写下了一些观察结果：
使用 setTimeout 用一些纯 JavaScript 替换 .animate() 方法并没有改变效果。< /p>
left属性的非动画更改按预期工作，但是，在包含地图的情况下，它始终是“1次点击”（第一次点击将属性更改为 -800 但没有任何变化，第二次点击单击将其设置为 -1600，但显示中间滑块元素等。）。将动画持续时间降低到 20 会使错误恶化，因为每次迭代的“像素步长”都会变大。同样，看起来最后的更改确实没有“通过”。因此，当将持续时间设置为 800 (1ms/px) 时，元素会偏离一个像素。
在开发人员工具中减少
left的值在包含地图时也会显示一些奇怪的效果，例如，当减少 2 时，滑块元素向右移动 1px，然后向左后移 1px 。当地图被扔掉时一切正常。删除滑块 div 的“overflow:hidden”属性可以修复错误，但您必须以其他方式隐藏 sliderelement（请参阅修订后的 jsfiddle）。
当包含地图时，
left属性的最后一次更改看起来确实没有反映在渲染的页面中。This update to your example seems to work in Safari 5.1: http://jsfiddle.net/tGRf6/33/
Removing
overflow:hiddenfromdiv#sliderfixed the issue. In order to hide the other slide elements again, I then wrapped another<div id="innerslider">around the<ul>and moved theoverflow:hiddenproperty from<div id="slider">to that new<div>(plus some more CSS).I would still (first search for and then) issue a bug report with your jsfiddle example, pointing out that overflow:hidden seems somehow involved.
Hope this helps.
Before coming to this potential solution (did not test in other browsers than Safari 5.1 and Firefox 7) I had written down some observations:
Replacing the .animate() method by some plain JavaScript using setTimeout did not change the effect.
Non-animated changing of the
leftproperty works as expected, however, with the map included it is always "1 click behind" (first click changes the property to -800 but nothing changes, second click sets it to -1600 but the middle sliderelement is shown etc.).Lowering the animation duration to 20 worsens the error as the "pixel steps" get bigger per iteration. Again, it does look like the last change does not "get through". Accordingly, when setting the duration to 800 (1ms/px) the element is one pixel off afterwards.
In-/decrementing the value for
leftin the developer tools shows also some strange effects when the map is included, e.g. when decrementing by 2 the sliderelement moved 1px right, then back 1px to the left. Everything ok when the map is thrown out.Removing the "overflow:hidden" property of the slider div fixes the error, but you would have to hide the sliderelements some other way (see the revised jsfiddle).
It does a lot look like the last change of the
leftproperty is not reflected in the rendered page, when the map is included.