"Exploring the relationship between UIWebView and CSS's fixed positioning

Question

"Exploring the relationship between UIWebView and CSS's fixed positioning

My UIWebView is set up with a fixed position header.

Everything works seamlessly when the initial view of the ViewController containing the UIWebView is displayed.

However, if I present that same ViewController using a Modal segue, an issue arises.

When I first scroll on the page, the divs shift and scroll along with the content. But as soon as I stop scrolling for the first time, the div snaps back to its fixed position, and the problem never reoccurs.

Any suggestions? While I've looked into iScroll, it doesn't quite fit the functionality I'm seeking for the page. I believe there must be a simpler solution, especially since the problem only occurs during the initial load of the UIWebView...

iphone ios css xcode uiwebview

Answer 1

Answer №1

To address the issue, I implemented a CSS hack by setting the header to absolute positioning in the top left corner. Additionally, I applied an overflow-y: scroll; property to the main <div> and specified body { height: 100%; }.

This workaround effectively created a makeshift version of iScroll!

UPDATE

Furthermore, for a smoother user experience, you can add:

-webkit-overflow-scrolling: touch;

To the main <div> style for a more natural scrolling effect.

Answer 2

To address the issue, I implemented a CSS hack by setting the header to absolute positioning in the top left corner. Additionally, I applied an overflow-y: scroll; property to the main <div> and specified body { height: 100%; }.

This workaround effectively created a makeshift version of iScroll!

UPDATE

Furthermore, for a smoother user experience, you can add:

-webkit-overflow-scrolling: touch;

To the main <div> style for a more natural scrolling effect.

Answer 3

Answer №2

Regrettably, the reliability of position: fixed on iOS is still questionable. This means some compromises will need to be made.

iScroll might be a potential solution, but it is essentially a workaround. It may not always provide the desired "fixed" appearance due to slow scrolling on certain devices.

Without much information about the content of the header, here are a few alternative options to consider:

a. Place any elements requiring fixed positioning at the top of the screen in a UIView within your ViewController, placing the UIWebView below.

b. Adjust your storyboard layout to remove the necessity for a modal segue.

c. Consider avoiding the use of storyboards altogether to avoid issues with segues.

d. Revise your HTML structure to eliminate the need for a fixed header.

Provide more details about the contents of the fixed header, and we can explore additional ideas together.

Answer 4