Overcoming browser-originated top/bottom popups in smartphones

When adding “call now” buttons or “message now” buttons in mobile display I encounter the following problems with various browsers:

  • The smartphone’s very own basic control buttons “tab” covers about a half of a fixed or sticky call now / message now button and a tiny bit of scrolling down is needed to properly read the button (happened to me in Duckduckgo)
  • After the webpage is loaded, the browser immediately pops up some 50px-60px height popup on the bottom edge of the browser window which covers “flying” call now / message now buttons (happens with “translate this page” tab in Chrome)
  • After the webpage is loaded and the user scrolled down to a certain level, scrolling back up initiates a browser 50px-60px height popup under the top edge of the browser window which pushes “flying” call now / message now buttons (happened to me in Duckduckgo)

Is there any software / automation solution / JavaScript trick to fight these unpleasant surprises?

This article on CSS tricks has a fix for some of those problems. I don’t think it’s foolproof as some browsers like Safari don’t seem to fire the resize event in the same manner.

Also if its an extension adding code into the page (such as translate) then there would be little that you could do as it’s just like inserting your own html on top of something else.

If the problem is a fixed footer or a sticky footer then avoid using vh units as they refer to the max-height which will include any status bar when it pops up and may cover the footer. If the design allows then height:100% is better (but still fraught with problems as you need an unbroken chain of heights back to root for it to work). See the article here and read the comments.

In ios a fixed positioned footer with bottom:0 seems to avoid the status bar when it pops in and out and IIRC that used to break in older versions. I have no idea about android versions though.

The css variable technique using js and window inner height would seem to work most of the time but mobile browsers are changing constantly and when you revert to a hacky method you may find it is quickly broken in newer versions. Some of those ideas mentioned above show different results in newer browsers.

Unfortunately I don’t think there is one simple answer and it depends on the task in hand.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.