Question

我对safari有一些奇怪的行为，我使用jQuery.GridLayout插件和css进行样式化。

仅针对某些上下文，此网站布局是一个简单的标题，后跟内容，这些内容是由javascript定位的块集合（每个块是div），并在每次重新调整窗口时重新排列。

当我将safari引导到网站url时，所有块都在某种程度上重叠（例如50％）但是当我重新调整窗口大小时如果它们必须移动，则自动全部转到正确的位置并且只有在刷新时才会中断页面。

因此，加载页面似乎搞乱了，因为某些内容无法注册，或者因为在重新调整窗口大小之前没有发生某些事情。

任何人都在野生动物园中遇到过这种行为吗？

它在firefox和opera中完美运行，它是一个有效的html 4.01过渡页面，并且css也经过验证（wc3明智）。

我知道发布代码对于排序这类问题是非常宝贵的，但这是一个生产项目，我不得不这样做。

无论哪种方式，我都很欣赏任何有关开始寻找的建议吗？

如何在safari中调试此问题？

谢谢。

Answer 1

Safari会在加载链接资源之前触发DomReady。通过在任何JavaScript之前加载CSS资源，通常可以避免计算CSS中定义的元素大小的竞争条件（例如：确保标记出现在ANY之前的标记中（这些标记是阻塞的，但是对CSS进行了更改以异步加载）更糟糕的情况是，将你的块移动到最后一个元素，将你的标记保留在上面。

还建议使用CSS连接多个文件（如果有的话）。

Answer 2

如果您无法为我们发布页面的实际代码，您可能会在尝试重现问题时找到解决方案，而不会显示您的具体内容。在过去，我在尝试生成一个显示要在IRC / SO上发布的问题的页面时解决了我自己的一些问题。如果您能够在没有内容的情况下重现问题，请将其发布给社区，并且更容易找到答案。

我的黑暗猜测导致：

您可能会发现其中一个内容块导致了此问题。
您可能会发现正在使用的其他库导致此问题。
您的布局的一些javascript代码可能在所有内容准备好/填写之前运行。从我的内存中，Safari可以在加载图像之前快速显示页面。
也许你需要指定一些Grid Containers的确切宽度/高度。

Answer 3

小更新：

（底部的新更新）

http://www.howtocreate.co.uk/safaribenchmarks.html

还有一些有用的东西就是这个小脚本：

<script language="JavaScript"> 
 // CREDITS: 
 // Automatic Page Refresher by  Peter Gehrig and Urs Dudli www.24fun.com 
 // Permission given to use the script provided that this notice remains as is. 
  // Additional scripts can be found at http:
  //www.hypergurl.com 
 // Configure refresh interval (in seconds) 
 var refreshinterval=20 
 // Shall the coundown be displayed inside your status bar? Say "yes" or "no" below:
 var displaycountdown="yes" 
 // Do not edit the code below 
 var starttime 
 var nowtime 
 var reloadseconds=0 
 var secondssinceloaded=0 
 function starttime() { starttime=new Date() starttime=starttime.getTime() countdown() 
 } function countdown() { nowtime= new Date() nowtime=nowtime.getTime()      secondssinceloaded=(nowtime-starttime)/1000 
 reloadseconds=Math.round(refreshinterval-secondssinceloaded) if      (refreshinterval>=secondssinceloaded) 
  { var timer=setTimeout("countdown()",1000) if (displaycountdown=="yes") 
  { window.status="Page refreshing in "+reloadseconds+ " seconds" 
  } } else { clearTimeout(timer) window.location.reload(true) } }            window.onload=starttime 
 </script>

我觉得奇怪的是，一个刷新的脚本解决了safari中的问题，但是如果我手动刷新页面，那么页面就会随之而来......

########UPDATE ##########

好吧我终于有了更多的时间来处理这个问题，在做了一些阅读之后我想到了一个相当明显的事情，让内容加载然后格式化，所以现在所有的j都在{{1}之间}和</body>。

它不完美，因为现在你可以在第一次加载页面时没有正确放置内容一瞥内容。

也许不好尝试在加载几毫秒后第二次调用js。

我知道这个提议有点高，我只需要时间弄脏我的手，谢谢所有，我会不断更新，直到我以更合适的方式解决它：）

Safari问题与javascript + css

3 个答案: