I'm facing an issue with an element that is fixed to the top of the page and scrolls horizontally along with the page. The CSS code for this element is quite straightforward:
.thing {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: #CCCCCC;
text-align: right;
}
You can see the element in action here: http://jsbin.com/cetutaxaju/1
While this setup works well on most browsers, I've encountered a problem with Safari on iOS 8 where the fixed bar is not 100% of the viewport as expected, but rather 100% of the content (which was not the case on iOS 7).
The issue seems to be related to the meta viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
To illustrate, removing these settings: http://jsbin.com/cetutaxaju/3
If anyone has insights on why this is happening or a possible solution, I would greatly appreciate it. I do need the viewport settings to remain intact as the actual site functionality depends on them.