If I access my website from smartphone with Google Chrome in English I get the famous 100% width “translate this page” sticky bar appearing in the downmost part of the browser window.
My problem is that the sticky language translation bar, which is a native part of the Google Chrome browser, actually covers (goes on top of) a sticky “call now” bar which I have developed and which should also appear in the downmost part of the browser window and has pretty much the same height.
Hebrew speakers who are using Chrome in English might miss the sticky “call now” bar just because of it being covered by the Google Chrome language translation bar, and therefore I might lose leads.
If it matters, here is the main CSS for the sticky “call now” bar:
How would you suggest to handle the problem in the question?
How are you ensuring that the bottom property is the bottom of the viewport ?
If you have sized your container or body using 100vh units then there is a known problem with sticky and fixed elements on some mobiles. The fixed or sticky element at the bottom of the viewport is often covered by the browsers own display elements.
If this is the case you need the old fashioned 100% method where HTML and body are set to height:100% and then the sticky element should be sticky but not hidden by browser messages or design elements. This of course assumes that the sticky element is a direct child of the body.
There are too many ‘if buts’ to offer a definitive solution (if indeed there is one) so would need to see a reduced demo that exhibits the problem.
What I was getting at was if you have something like this that has no heights involved then it should adapt better to whatever the browser puts in place.
It also depends on what you mean by ‘sticky’ as these days it can mean either a real position:sticky footer, or a position:fixed footer or indeed the old fashioned sticky footer that is only sticky at the bottom when the content isn’t at screen height.
I guess I’d need to see a demo of your site to be sure
I have tried the codepen on fullscreen on a cashless Google Chrome on my smartphone (OnePlus 6) which is in English (I have several languages ).
The problem persists; although the webpage’s language is not Hebrew (because codepen isn’t in Hebrew), I was still able to somewhat reproduce the problem by manually activating the translation bar from Google Chrome’s menu.