Skip to main content

Mobile

Making web apps work smoothly on mobile is an extremely important part of web development, but often very challenging. Here are some tips for making sure your Liqvid videos work as well as static ones.

Web Animations​

The Web Animations API is not supported on older browsers, and the official polyfill is broken in various ways. Place the following code in your video page to work around this:

<script src="https://unpkg.com/@liqvid/polyfills/dist/waapi.js"></script>

You can also just do

<!-- @script "polyfills" -->

if you are using the magic resource syntax.

One part of the polyfill that we haven't yet patched is that "partial keyframes" are not supported: you must explicitly specify "initial state". The following will not work on iOS <=12:

playback.newAnimation(
  [{}, {transform: "scale(3)"}],
  {delay, duration, easing: "ease-in-out", fill: "both"}
)

Instead, you should write

playback.newAnimation(
  [{transform: "scale(1)"}, {transform: "scale(3)"}],
  {delay, duration, easing: "ease-in-out", fill: "both"}
)

Fake fullscreen​

iOS does not support the fullscreen API. Place the following code in the <head> of the hosting page (the page containing the <iframe>) to work around this:

<head>
  <script src="https://unpkg.com/@liqvid/host/lv-host.js"></script>
</head>

Fat fingers​

Controls need a larger clickable area on mobile. You can use the following to increase the clickable area of an HTML component:

.fat-fingers {
  position: relative;
}
    
.fat-fingers::after {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}

We learned this trick from https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/.

For SVG components, such as a <circle/>, you can use a duplicate element which is a bit larger and has fill: transparent.

Click events​

Click events do not work reliably on mobile devices; one should use touch events instead. We provide an onClick helper for this.

  • Refresh