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:
If it matters, I don’t load the sticky “call now” bar from PHP (i.e. from the content management system’s PHP template files), rather, I load it from JavaScript and would like to continue loading it with JavaScript just not to touch the native PHP template files.
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 guess I’d need to see a demo of your site to be sure
PaulOB thanks, it’s much appreciated, I will send the URL in a private message (of course it’s best if there could be an answer here for people with a similar problem).
You could try my codepen above (in fullscreen or debug mode) in your version of Chrome and see if it does the same as your site (you’d have to do it in your language of course).
If it also happens with the codepen then it looks like a browser bug with sticky and not much that could be done apart from not using sticky.
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.
An actual fix might be to boot the “call now” bar’s HTML and CSS directly from the content management system’s PHP template files (instead from JavaScript) but it’s something at least for now I want to avoid from reasons outside the scope of that discussion so if no further problems occur due to that situation I would just continue with it.
