![]() It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it prevents users from ever seeing a gap. a hostile exoplanet after Earth was destroyed in a brutal planetary war. If we add 60px to the height, as swiss suggests, this problem goes away. Although no gameplay was shown, the teaser offers some background lore to the. This is because it is keeping the background sized to 100% of the screen height minus the URL bar. The latest change, is you can no longer "hide" the URL bar on page load on iOS or Chrome using scroll tricks.ĮDIT: While the above script works perfectly for keeping the background from resizing, it causes a noticeable gap when users scroll down. I understand the purpose, but they really need to think through the strange functionality and havoc they bring to websites. On a side note, I've seen so many issues with these resizing URL bars in iOS and Android. However, it is the only viable solution I see considering iOS's "vh" bugs (which do not appear to be fixed in iOS 7). This is not the best solution as it isn't pure CSS and there is a slight image jump on page load. Therefore, Javascript can be used to set a static height on the #bg1 and #bg2 based on the viewport size. ![]() ![]() I attempted using a max-height to prevent the issue, but it remained.Ģ) The viewport size, when determined by Javascript, is not affected by the URL bar. I entertain two possible solutions:ġ) Set the #bg1, #bg2 height to 100vh. Since the background image is set to "cover" it will adjust the image size/position as the containing area is larger.īased on the responsive nature of the site, the background must scale. This issue is caused by the URL bars shrinking/sliding out of the way and changing the size of the #bg1 and #bg2 divs since they are 100% height and "fixed".
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |