disappearing position fixed header in ios7 mobile safari
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 */
}
position: fixed doesn't work on iPad and iPhone
I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/
We now have a solid re-write that provides true fixed toolbars on the
a lot of popular platforms and safely falls back to static toolbar
positioning in other browsers.The coolest part about this approach is that, unlike JS-based
solutions that impose the unnatural scrolling physics across all
platforms, our scrolling feels 100% native because it is. This means
that scrolling feels right everywhere and works with touch, mousewheel
and keyboard user input. As a bonus, our CSS-based solution is super
lightweight and doesn’t impact compatibility or accessibility.
iOS Mobile Browser scrolling issue with position:fixed, Page jumps back to top when scroll ends
the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.
Related Topics
How to Create a Lollipop Shape by Stacking Divs in a Circular Manner
Fonts and Font Awesome Icons Not Loading Over Ssl
Svg Symbols Not Being Displayed in Firefox
Change Colour of Pickerinput Items in Shiny
CSS 3 or Svg Wave in a Background
How to Override Opacity for a Child
Css3 :Not() Selector to Test Parent's Class
Angular Material Mat-Spinner Custom Color
Change Color of Svg Background-Image (Bootstrap 4 Carousel)
Responsive Images Inline-Block in a Div with Bootstrap
How to Record a Video of Website Using Headless Chrome
CSS Selector: First Paragraph's First Letter Inside a Div
How to Update and Include Twitter Bootstrap 3 on Webapp or Yo Angular
Remove the Material Stepper Header