My dear community. I just got back to some html / css coding after a pause of several years (10 to be precise). Actually, my main focus was always on php these times, wherefore I had never been a markup pro. Long story short: I'm rebuilding my parent's website, for what I used a themeforest HTML template to adapt it (no WP! It's called "Porto" by Themeforest). And I'm really seeking for some help...
I'm not able to get the following fixed:
The goal: If a user visits our site via his mobile phone, there should be permanently shown a "Call Us Now" bar full width on the bottom of the screen. There shall be two links in it, one linking to the phone no and the second one to an "Callback-Option".
It is as simple as that. A permanently fixed div shown on the bottom of the screen (like the well-known cookie warning by the GDPR). But, unfortunately, it doesn't work.
I created two divs with "position:fixed;" and "bottom:0;", one for each link and each width 50% of the screen.
.mobileShow1 {
display: none;
}
.mobileShow2 {
display: none;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow1 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 0;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
.mobileShow2 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 50%;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
}
And the divs are:
<div class="mobileShow1"><div style="margin-left:15%; padding-top:5%;"><a href="tel:+49000000"><i class="icon-phone icons"></i> Call Us</a></div></div><div class="mobileShow2"><div style="margin-left:3%; padding-top:5%;"><a href="/"><i class="icon-call-in icons"></i> Callback-Service</a></div></div>
Basically, this does work perfect. I tried it out with my iPhone X and it worked smoothly. Nevertheless, on "older" iPhones (iPhone 8, iPhone SE), the bottom bar flickers horribly. I made over 6 hours of debugging but I cannot get it fixed. It is definitely due to the "bottom:0;" value. If it is changed to "top:0;" it works fine; but - you will imagine - the bar is on top. There was no way for me to get the bar on the bottom permanently without any flickering.
I found out that there could GPU issues / GPU performance be one reason for the flickering issue. As the website template uses quite a lot of Javascript, and the flickering is happening more on sites with some pictures and sliders, this sounds quite likely. But I cannot (and will not) accept that there is no way to bring down a div bar on the bottom of an iPhone screen just because some Javascript is loaded.... I hardly cannot understand why it works perfectly with the value "top:0;" set, but if it changes to "bottom:0;" the flickering starts again. Why is there such a huge difference for the GPU?
I tried everything I found on the web, to modify the attributes as follows, to get the GPU "quicker", for example:
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0) ;
transform-style:preserve-3d;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition : none !important;
-ms-transition: none !important;
transition: none !important;
-webkit-overflow-scrolling:touch;
z-index:9990;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Nothing worked. The flickering does not stop or get any better. My dear community - I know I'm new here but as I have seen you always found a solution. It is really absurd that I cannot get a div bar fixed on the bottom line without any flickering....
The HTML5 template I use is "Porto Theme" by Themeforest. The theme uses the typical Javascript Packages (jQuery, some Sliders, etc).
Please, is there anyone that could help me? I would implement anything to get this done. I cannot believe I am the only one who wants that... Thank you so much in advance. Please let me know if you need any further informations.
All the best from Vienna.
PS: Please forgive me my poor HTML/CSS markup skills...
The Code is here: http://www.proganize.org, A Video of the flickering can be found here: http://file.io/5YVFjg
