[Resolved] Different footer-behaviour (and header) in Safari, but apparently no reason

[Michael]

Dear GP-support,

first of all thank you very much for making all of our life easier with the help of GP 😉

I created a website recently with GP … https://www.seniorenhilfe-dresden.de/ … and there is a problem with the footer which I don’t get. Although I built all footers the same way and even duplicated some blocks, they act differently in mobile version. We could see the problem on Apple devices and I will give screenshots (from the dev, but it’s the same on live-version) for better understanding:

https://www.seniorenhilfe-dresden.de/footer-ohne-ueberhang/ => footer with correct dimension
https://www.seniorenhilfe-dresden.de/header-ohne-ueberhang/ => header with correct dimension

https://www.seniorenhilfe-dresden.de/footer-mit-ueberhang/ => footer is incorrect, a kind of white separator-line and then again red-background where I can’t find its definition
https://www.seniorenhilfe-dresden.de/header-mit-ueberhang/ => header is incorrect, also this very big red-area on top of the header menu

I hope I make it clear what I’d like to know. If not, I can provide more information. Kind regards, Michael

[Michael]

red page … https://www.seniorenhilfe-dresden.de/diakonie-sozialstation/
orange page … https://www.seniorenhilfe-dresden.de/tagespflege-fuer-senioren/
green page, e.g. … https://www.seniorenhilfe-dresden.de/jobs/ or homepage itself

[Ying]

Hi Michael,

I checked the 3 links on iPhone 13 with Safari, and none of them seem to have any issues.

Have you tried using another device? Let me know!

[Michael]

Hi Ying,
thanks for your reply … I’m using an iPhone 12 mini with iOS 16.1.1 and I see the different behaviour. It’s not this obvious, but I try to explain in another way …

If you are on the homepage https://www.seniorenhilfe-dresden.de/ and you try to refresh the page by touch. Means you tap with your finger down, you see the “reload”-icon on a blank background (see this picture: https://www.seniorenhilfe-dresden.de/header-ohne-ueberhang/) and clearly obvious the green mobile header underneath.

But doing the same procedure on this “red”-page https://www.seniorenhilfe-dresden.de/diakonie-sozialstation/ I get the result of the reload-icon on a red background (picture: https://www.seniorenhilfe-dresden.de/header-mit-ueberhang/) and the red page-header is merged with this background.

You don’t get this result on your iPhone-screen doing it the way I described?! I checked with my colleagues and the client herself on a variety of Apple-devices (different iPhones with different iOS-Versions) and we always get this failure … Desktop and tablet working correctly, I checked it again just now.

And the same thing happens with the footer when you are down there on the mobile page and tap on it with your finger moving upwards. On the homepage the footer ends correctly (picture: https://www.seniorenhilfe-dresden.de/footer-ohne-ueberhang/), on the red-page the footer seems to merge with another kind of red-background and there is a 1px white separator-line visible (picture: https://www.seniorenhilfe-dresden.de/footer-mit-ueberhang/).

I’m sorry if my English is too bad to explain my issue more on point, but I think with the screenshots it’s understandable?!

Thanks in advance for your help, regards Michael

[David]

Hi there,

** Theme coloring

the Safari browser provides theme coloring ( or theme tinting ).
Which allows a web developer to define a theme color that the browser will display in the phones top bar, and as the background to the browser. This is what you’re seeing on the Red pages.

Why are you seeing this?
There are two methods that add this effect:

1. Developer has added the theme-color meta to the head of your site using the wp_head hook:
<meta name="theme-color" content="#ecd96f">

2. Safari is automatically adding the color. It’s not clear what automatic algorithm is used, but other users have reported that some colors are not conducive to theming ( eg. lack of contrast, conflict with iOS UI Colors ) so the browser simply displays the default colors.

It looks like you’re experiencing #2.

How to stop that?

You could use a Hook Element to add to the wp_head hook your own theme color eg.

<meta name="theme-color" content="#ecd96f">

** Color switching from green to red

I am not experiencing this, but what may be happening there is the Green Color is your color set in the Theme. So this CSS is printed first. On the other pages you’re using Custom CSS to change the elements colors, so those are printed second. So on slower networks there may be a time when you see one color being quickly updated to another color.

[Michael]

Hi David, thank you very much for your explanation. I will try to fix it the way you told and afterwards give a feedback here. The support here in the forum is really great … Cheers, Michael

[David]

You’re welcome

[Michael]

Thanks David, the Hook Element solved it … but the Safari behaviour or algorithm is really strange: using pure white (#ffffff) didn’t change anything, but hex-code #fffffe is working and the human eyes don’t see the differnce, I think 😉

[David]

Glad to be of help 🙂

[Author]

Posts