iPhone 5 with 3G functions differently than on Computer


So I have set up a page that is using javascript to set the responsiveness of an elements height. I have it set to equal the viewport height. I have the responsiveness of the elements width and text to be based on current page width and have conditionals set to make the element visible or not.

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.

I had assumed the issue was based on connectivity speed. So I put my javascript on page load and reduced complexity of the page. This worked out, however the issue that is persisting is that when on button press to scroll to the next group element, the group element reverts back to its original position, despite the fact that no javascript is part of the workflow.

This is my javascript on page load:

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.

In order to achieve the viewport height responsiveness I needed to place all groups into one group element. All groups needed a Y-coordinate of zero so that once the javascript runs to translate and transform the Y-coordinate to a ViewPort Height (100VH), all group elements would line up correctly.

This is Javascript on page load with highlighted section as an example. However, all elements on page have similar issue when icon is pressed and scroll is initiated.

On page the icon is pressed and workflow just is to scroll.

I am not sure what the issue is now, since I have eliminated the issue of connectivity speed because the height and Y-coordinate javascript settings on done on page load.

I had set up all text elements inside of the group containers to just hide/show when necessary. Nothing is set to collapse height when hidden, so that all javascript from page load is unaffected when text elements are hidden / shown.

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.

1 Like

So I figured it out, not that I understand why it works, but just that I got it to function the way it should.

Instead of scrolling to the position of the main group element, I scrolled to position of the sub group element. Essentially the set up was Group 1 contains Group 2 which contains Group 3 that contains Text elements. Group 3 is hidden / closed in workflows.

Scrolling to Group 1 caused the issue.

Scrolling to Group 2 fixed the issue and the Group 3 which is being hidden / shown doesn’t move back to the original position of 0 Y-coordinate inside of Group 2.

Group 2 is set to x-coordinate and y-coordinate 0 of Group 1. So Group 1 and Group 2 are identical, except that Group 2 is contained by Group 1.

Strange that this worked but it did. I guess it could be that the group which contains the elements to be hidden/shown must be scrolled to.