Issues with Chrome

Fonts are pixelated or blurred

It is a common problem in Chrome, that the fonts are rendered pixelated or blurred, because they just don't render ttf and woff fonts well.

So the fonts aren't made by our slider, it's just how Chrome makes texts show up, and there isn't a real solution, just these tricks what you can read, that if you use svg fonts instead, that should be fine.

Use your own fonts or use javascript fonts instead, which aren't using Chrome's font rendering, they are drawing the fonts.

There is only one tip we can give, if you don't want to use other fonts, and that is, if you remove the boldness, and that would make it look better.

Video layer's cover image isn't used

Chrome has changed how it handles HTML video elements and it will only use the "poster" attribute if preload:metadata is used on the video element. So you should go to your video layer's settings, change the Preload option to Metadata and it should solve your problem!

There are no images in the lightbox

Chrome version 84 has a bug, that the images don't always load in the lightbox. (In version 83.x there was no problem with this.) We have reported this bug and the developers seems to managed to fix this problem in their latest build of Google Chrome Canary (the developer version which contains the upcoming fixes). So once Chrome releases this new version, this problem should no longer occur.

Until then, this CSS code could help you in fixing the problem:

div.litebox-overlay img, div.litebox-overlay iframe {
     overflow-x: unset; 
}

You can paste it to Slider settings → Developer tab → CSS.

Layer animation with Blur

Problem description

The layer animations, which have blur on them load with a jumping/flashing effect.

Workaround

Temporarily disable the Blur on the animations, so Chrome would render it properly.

Upscaling makes images disappear

Problem description

The "Scale" layer animation makes Image layers either not appear or appear after the scaling.

Workaround

Don't use 0%, but rather 0.1% as the starting point at your Scale animations.

1px line above/below Shape divider

Chrome has the same bug Safari does, that when not whole pixels are used, there are rounding issues. This creates 1 extra pixel, and even if you position an element 0px from the top or bottom part of another element, it will be 1px away from the top/bottom. Because of this, when you are using Shape divider, a line could appear.

Video not looping

Chrome won't loop videos, which are too big either in filesize or in pixel size. If you have an issue where your video won't loop, try a different, smaller mp4 video url, like this one:

https://www.w3schools.com/html/mov_bbb.mp4

to see if it loops for you. If it does, edit your original video to make it smaller.

Background animations are flashing

Chrome's hardware acceleration has a bug, which can make background animations to have a white flashing. This problem cannot be worked around, so if it bothers you, you should either not use background animations or go to your Chrome's settings -> System -> turn off "Use hardware acceleration when available".