Animations on iPhone

I Need Help
1

Hi,

I have created a one pager website with blocs 5.

On the first starting page, there is a text, which fades in as soon when the website os loading.

The animations are working perfectly on a desktop (tested on Mac with Safari & Chrome).

Also the first page is shown in full-sceen (height 100%), so it is fitted to the whole page.

When I load the website on iPhone (tested iPhone 13 Pro, mobile Chrome & Safari), unfortunately the fading in animations are not being shown at all. The text does not fade in, but is there immediately.

Also on iPhone, the Website is not adjusted to 100% of the height.

It seems, that it is not shown full-screen, but ca. 95% of the height.

A small part of the first page (ca 5% of the starting page), is shown not until you scroll a bit down.

I do not know, if the problem with the animations is referable to the first page not showing 100% of the height …

I have also checked some of the available blocs templates:

https://www.blocs-templates.com/templates/hair/index.html

Here it seems to be the same.

Animations work perfectly on the desktop, but on mobile (iPhone) the animations are not shown at all, and also the first page is not fitted to fullscreen.

Could this „bug“ occur because of the „toolbar“ of the browser, which takes a bit away from the 100% height?

On iPhone, when you load the starting page the toolbar is shown, and when you scroll down, it disappears.

When the toolbar is hidden, the site is shown on fullscreen.

But when the toolbar is shown, the height of the toolbar is added to the first page, so it goes further down.

So to make the starting page full-screen, the height of the first page must be 100% minus the height of the tool bar to make it fit perfectly.

I hope that you understand what I mean.

Attached I have added a screenshot.

How can I achieve, that the site is always adjusting to 100 % height, in the two cases toolbar shown OR toolbar hidden?

Hope you guys can help me.

Looking forward to your hints and feedback!

IMG_5122
IMG_51221170Ă—2532 291 KB

3

Hi Jerry,

Thank you for your quick reply.
I have already checked the project settings.
The animations on mobile are not disabled in the settings.

Any more ideas ?
What about the height of the starting page?

5

http://oliviagawron.de/

On android mobile phone the animations and fullscreen fitting seem to work …

Only on iPhone there are those problems …

7

The icons below „Unsere Leistungen“ are not shown on the first page.
The page does not adjust itself to 100% height, so you need to scroll down to see the icons. But I want to see the full, first page!

Please compare the website on desktop (all animations and full screen height) are working, to the iPhone behaviour.

IMG_5229
IMG_5229811Ă—1504 217 KB

9

Yeah it’s a long standing issue on mobile safari. The viewable height changes on scroll.

If you have static values it doesn’t allow for the movement of the UI on scroll and when active. So fixed values like 100vh which is common for full screen are problematic.

There things you can do to work around it. But for the most part people ignore it (because they don’t know you can solve it usually).

CSS has env() - environmental variables. That and using safe-area-insert allows you to fix it in more modem iOS safari versions.

maybe @Norm can add support for this to be applied.

10

@PeteSharp thank you for your reply. Can you please give a more detailed instruction, how to make a „work around“ to fix the problem?

Do you have an idea how to fix the „animation not shown“ issue on iPhone?
The text on the starting page on the iPhone should fade in (like on the desktop version).
But the text is immediately there with no animation …

11

I will do a video tutorial on the full screen blocs.

But back to the website. Animations work for me just like Jerry posted above.

Maybe disable the preloader and see if it makes a difference for you.

12

@PeteSharp that would be awesome, if you could make a video tutorial :star_struck::+1:t2:
I tested the website on iPhone 11 Pro und iPhone 13 Pro (Safari & Chrome), but not animations are shown …

I will try your hint to disable the preloader

13

@PeteSharp
Can you DM me, as soon as you have done a tutorial video ? :blush:

14

Hi @tom88,

ist that your life-site?
I see any problems with the GDPR.
Just so you can avoid warnings.

Greets

15

@mr_xing

So you mean, I have to integrate a cookie banner, like it is described on https://help.blocsapp.com/de/knowledge-base/eu-cookie-consent/ ?

But is it also necessary, when Google analytics is not integrated?

16

No, I think that the page loads Google Maps and Google Fonts without asking is problematic.
I know people (here in Germany) who have received an expensive warning from a lawyer for this.

17

@PeteSharp any update regarding a tutorial video? :slight_smile:

18

It joined an inbox of things :grin:

I am sure you can appreciate, that my paying client work take a priority.

3 Likes
19

Dear Pete,

I would appreciate an update :grinning: