消失的位置固定标题在ios7移动safari [英] disappearing position fixed header in ios7 mobile safari

问题描述

我一直在搞乱这一整天，似乎找不到修复。

我有一个简单的ul，作为一个固定的标题与以下css：

  body {
 width：100％; 
 height：100％; 
 min-height：100％; 
} 
 
 .stream .header {
 position：fixed; 
 width：100％; 
 height：41px; 
 top：0; 
 right：0; 
 left：0; 
 z-index：10; 
 margin-bottom：10px; 
 list-style：none; 
} 
  

标题下方的内容包含以下css：

  .stream .stream-content {
 position：relative; 
 padding-top：41px; 
 -webkit-transform：translate3d（0，0，0）; 
} 
  

当在ios7 mobile safari中滚动页面时，会发生以下情况： p>

• 首先向下滚动 -
  标题随着页面顶部移动，直到滚动完成。




• 向下滚动 - 标题完全消失，滚动完成后不会重新显示。




• 向上滚动（标题仍然可见） - 标题完全消失，在达到页面顶部时不会重新出现。

  li>
  

• 向上滚动（隐藏标题） - 标题保持隐藏状态，并在达到页面顶部时不重新出现。




• 向上滚动（页面顶部已隐藏标题） - 标题重新出现并正常工作，直到页面向下滚动两次。

我没有iOS6行动版Safari Safari的问题，所以问题似乎与新的网址栏调整大小在滚动。

有其他类似问题的人吗？欢迎建议。

更新：

所以看来删除-webkit-transform3d在头的父（.stream）删除的问题，所以必须有一个冲突的父div的方式渲染和里面的头。

仍在寻找周围的工作。

解决方案

有同样的问题，它似乎是一个错误，当页面内部有太多的发生，我能够通过添加以下变换代码到固定位置元素，（ transform ：translateZ（0）; - webkit-transform：translateZ（0）; ），强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）另一方面，Web应用程序在浏览器的上下文中运行，这使得软件能够进行大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web已经赶上，大多数浏览器供应商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform：translate3d ，0）;

注意： translate3d（0,0,0） ）对你看到的内容没有任何作用。它在x，y和z轴上将对象移动0px。这只是一种强制硬件加速的技术。

  #header {
 position：fixed; 
 / * MAGIC HAPPENS HERE * / 
 transform：translateZ（0）; 
 -moz-transform：translatez（0）; 
 -ms-transform：translatez（0）; 
 -o-transform：translatez（0）; 
 -webkit-transform：translateZ（0）; 
 -webkit-font-smoothing：antialiased; / *似乎在Safari中做同样的事情* / 
} 
  

I've been messing with this all day and can't seem to find a fix.

I've got a simple ul that acts as a fixed header with the following css:

body {
  width: 100%;
  height: 100%;
  min-height: 100%;       
}

.stream .header {
     position: fixed;
     width: 100%;
     height: 41px;
     top: 0;
     right: 0;
     left: 0;
     z-index: 10;
     margin-bottom: 10px;
     list-style: none;
   }

The content below the header has the following css:

.stream .stream-content {
  position: relative;
  padding-top: 41px;
  -webkit-transform: translate3d(0, 0, 0);
}

When the page is scrolled in ios7 mobile safari, the following happens:

• first scroll down -- header moves along with page top fine until scrolling is complete.

• second scroll down -- header disappears completely and does not reappear when scrolling is complete.

• scroll up (with header still visible) -- header disappears completely and does not reappear when the top of the page is reached.

• scroll up (with header hidden) -- header stays hidden and does not reappear when the top of the page is reached.

• scroll up (already at top of page with header hidden) -- header reappears and functions normally until page is scrolled down twice.

I wasn't having this issue with iOS6 mobile safari, so the issue seems related to the new url bar resizing on scroll.

Anyone else having similar issues? Suggestions welcome.

Update:

So it appears that removing -webkit-transform3d() on the header's parent (.stream) removes the issue, so there must be a conflict the way the parent div is being rendered and the header inside.

Still looking for a work around though.

解决方案

I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#header {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */
}

这篇关于消失的位置固定标题在ios7移动safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！