Everything is working as expected on the Desktop, Tablet and Mobile versions when using my computer and reducing the screen width as well as the viewport height.
The problem is when I am using my iPhone 5 to test it on an actual mobile device the functionality isn’t working as it should, and therefore not as it does when using a mobile view on a computer connected to home wifi.
This makes everything on page load appear as desired. Users can scroll the page and all elements are in correct position and of correct height and width dimensions.
Then I have on page icons that are pressed to automatically scroll to the next group element.
This element to scroll to is visible on page load. It works as expected on a computer with viewport set to mobile, but doesn’t work on iPhone 5 as the page scrolls to the group element designated, however the content is moved to its pre-page load position.
On page the icon is pressed and workflow just is to scroll.
Really curious if there is just some kind of issue that is caused by the scroll to group function that causes the group element to get is Y-coordinate position changed back to “zero”.
Has anybody experienced similar issues, or perhaps have an idea of why this could be occurring? I really want to keep the group elements equal to viewport height and don’t want to give up on figuring out what would be really nice responsive design.