Apple is shaping the web in small and large ways.

Safari features like dragging the sides for navigation, pull to refresh and scroll bouncing/rubberbanding are the most immediately apparent examples.

Obviously, websites need to accommodate desktop and mobile screens. What isn’t obvious and justifiable are the changes all developers must make to accommodate Apple’s current design decisions. Safari “features” I listed are easily categorized as design decisions and not functional ones. After all, Apple has not removed the back, forward and refresh buttons. They’ve implemented a new way to use those features that website developers must work around.

Example 1.

Let’s say I want a persistent header/navigation bar as many websites do. Ok, historically this could only be done with Javascript. Thankfully for those of us who want to avoid J*vascript, there are a few solutions with pure CSS [1] [2] The first one uses a newish “sticky” position value while the other one makes a div’s position fixed. Both of these are valid approaches to the problem, at least according to W3Schools. Note that W3Schools is not affiliated with the W3 Consortium.

These CSS capabilities are great! Perfect for a static site. Only problem is, they don’t “work” if you’re on mobile:

As you can see, whatever div you’ve stickied/fixed begins to scroll with the rest of the page, revealing your html background (if you set one.)

This isn’t a new thing. People have been asking for at least a decade how to disable Safari’s uninvited functionality. Several solutions have come up but most no longer work on current iOS versions and/or require Javascript.

I am an amateur coder and this is an amateur’s observation, sure. It just doesn’t make sense that this is the way Safari/webkit behaves when we all know this is undesirable behavior. It only exists because of the rubberbanding effect applied to every website run through Apple’s browser. Even Apple’s website does not have this issue, though I would assume they’re using Javascript and not some proprietary tech.

I’m not sure if this problem exists on Android. The last time I used Android, it did not apply rubberbanding to any of its scrollable menus, not even the Settings app.

So what’s the answer? I don’t think there is one. There are workarounds; with some website designs, setting a background to html would be enough that your header moving would not appear jarring. Another workaround is to reject sticky headers altogether - the web would hurt little if this design trend ceased to exist altogether. The takeaway is that Apple is shaping the web and there is nothing you can do about it.