I have a scenario in which I have a fixed page title, which should be 100% of the width of the viewport, and a larger element with a width of about 5000 pixels and it scrolls under the heading.
There seem to be a few issues with mobile browsers that don't capture the title and instead display a larger (proportional calculated) title that scrolls slower on iOS and suddenly jumps when it passes the title's width in terms of scroll position on android.
Using 100vw for the title works, but sometimes the title disappears with a certain breakpoint and doesn't seem really fixed.
Essentially, the problem is that the fixed element is 100%! = 100% from the viewport, i.e. 320 pixels, but the estimated width, which is somewhere between the width of the viewport and the large element.
Any help would be appreciated by weight!
An example of simplified code is as follows:
<!html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <style> * { margin: 0; padding: 0; } .a-div { position: fixed; width: 100%; height: 100px; z-index: 1; background: dimgray; border-left: 1px solid red; border-right: 1px solid pink; } .parent { width: 5000px; overflow: hidden; } .another-div { position: relative; width: 1%; height: 100vh; float: left; background: #5f9ea0; } .another-div:nth-child(even) { background: #add8e6; } </style> </head> <body> <div class="a-div"></div> <div class="parent"> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> <div class="another-div"></div> </div> </body> </html>
source share