Streaming live at 10am (PST)

Interactions-Bug on Safari and Internet Explorer


#1

Hi there,

we designed a landingpage for one of our customers and published the site:
http://r3lation.de/index.html.
https://preview.webflow.com/preview/r3lation-interim?preview=d07503aad699274caef6706eee6b5937

On Chrome everything works fine. But after opening the site in Safari and Internet Explorer the interaction doesn’t works good. Also the background-gradients (as a overlay above the video) doesn’t look good and much harder than it should look like.

Furthermore on all mobile devices the background-video doesn’t plays.

Who can help me find a solution for this bugs? :slight_smile:

Best regards,
Maik


#2

Hi @2SINN_Maik

Thanks for posting about these.

Gradient issue: This is a known quirk with Safari. You can resolve this by editing the color of the transparent part of the gradient like this:

Interactions issue: I recommend adding another step in the interaction. In your initial appearance make sure the logo is set to display: none and in the interaction you can add a second step to be display: block like this:

Regarding the background video—currently bg videos do not play on mobile devices. Instead, you will see the first frame of your bg video as a bg image. If you want a different frame for the mobile bg, you can add another element and set a background image of your choice. Then set it to only be visible on mobile breakpoints, and the bg video to only be visible on desktop.

Hope this helps :slight_smile:


#3

Hi @2SINN_Maik,
Read this post about background videos playing on mobile: Autoplay video on iOS 10 is here!
You’ll have to use an embed element instead of webflow’s background video element.


#4

Thanks for your reply, Brando!

The bug with the gradient is solved now, also the video in the background on mobile devices is replaced with an background-image.

Regarding the bug with the interaction: I added the steps to the interactions, but the bug is still there. Can you tell me, where I did a mistake? Or do you have further tricks for it? Also now the logotype is aligned on the top while it’s becoming bigger. Ideally, so it was before adding the step, it should be centered and become bigger and bigger.

Thanks in advance for further support! :slight_smile:

Best regards,
Maik


#5

Hi @2SINN_Maik

Thanks for letting me know!

For the interaction, can you try removing the width and height animations? And instead use a scale transform?

Here is an example:
34 AM

I kept everything the same in the interaction, except I deleted the width and height in the initial appearance and in the load animation. Then I added a scale transform of 0.1 on the initial appearance and a scale transform of 1 on load.

Hope this helps!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.