移动 Safari 白色背景

发布于 2024-11-30 18:29:42 字数 409 浏览 0 评论 0原文

我正在创建一个专门用于 iPad/mobile-Safari 的网络应用程序。主页是一个普通的 HTML/CSS 页面,包含 3 个主要部分。但是,一旦您单击 3 个主要按钮中的任何一个,您就会被定向到一个由 2 个 iFrame 构建的页面(一个在顶部用于导航,一个在底部用于内容)。

问题是,在加载这 3 个页面中的任何一个之前,都会出现一个快速的页面。白色闪烁,然后页面加载。我尝试隐藏 iframe 的可见性样式,然后 onLoad 将其更改为“可见”并且有效。但它只工作一次,即 iFrame 构建的页面首次加载时。一旦加载并单击该页面上的链接,白色闪光就会回来,因为 iFrame 已经加载,因此它已经可见。

我尝试了明显的方法,例如向带有背景颜色的 iframe 添加 css 样式(也尝试了内联样式),但发生了同样的事情。关于如何解决它有什么想法吗?谢谢!

I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)

The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.

I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

誰ツ都不明白 2024-12-07 18:29:42

你可以这样做:

<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

在内容中,你可以捕获所有链接和表单:

document.getElementsByTagName("a").addEventListener("click", function(e){
    window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});

说明:

  • 第一次,你的 iframe 是隐藏的,你可以看到主页的背景(不是 iframe 的白色)
  • 加载后,Javascript 会iframe 可见,可以看到 iframe 的内容和背景。
  • 当单击 iframe 内的链接时,将触发触发器,Javascript 将再次隐藏 iframe。

我遇到了这个问题,花了一整天的时间试图解决,但我不能除了上述方式。您可以在 Chrome、Firefox 和其他浏览器上遇到该问题,而不仅仅是在 Safari Mobile 上。

You can do this cheat:

<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>

In the content, you can catch all link and form:

document.getElementsByTagName("a").addEventListener("click", function(e){
    window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});

Explain:

  • First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
  • After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
  • When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.

I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.

我爱人 2024-12-07 18:29:42

我认为 KimKha 也是如此。但“可见性”有时效果不佳,所以我认为使用“不透明度”更好。

<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>

I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.

<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
腻橙味 2024-12-07 18:29:42

我遇到了这个问题,找到了很多像 KimKha 提到的解决方案。

没有一个解决方案有助于 iframe 中的进一步页面转换,并且隐藏它确实不是一个好的解决方案。

经过大量的尝试和错误,我想出了以下解决方案,解决了我的 IOS webkit iFrame 过渡白色闪光问题,讽刺的是,这是一个如此简单的解决方案:

只需将其添加到您的 CSS 中

html{background:#000}

,将颜色更改为您想要的颜色。

看起来 IOS webkit 的最终问题是,当你的 iframe 调用另一个页面时,IOS 会在渲染新页面的内容之前瞬间从当前页面中删除正文。通过强制 HTML 具有背景颜色(默认情况下自然是白色),这可以修复白色闪烁。

另请注意,如果您的服务器设置为不允许缓存提供样式的 .css 文件,那么您将始终出现闪烁。

在apache中确保缓存看看

ExpiresByType text/css "access plus 30 days"

I came across this issue, found lots of solution like KimKha mentions..

None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.

With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:

Just add this to your CSS

html{background:#000}

change the colour to your desired color.

It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.

Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.

In apache to ensure caching look at

ExpiresByType text/css "access plus 30 days"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文