question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lottie player not sizing correctly within div starting v1.4.2

See original GitHub issue

Consider this following working setup, where a Lottie animation inside a div with style properties take it correctly (the Lottie player doesn’t overflow the div, please notice):

alt text

Working source code (notice the 1.4.1 version) :

<script src="https://unpkg.com/@lottiefiles/lottie-player@1.4.1/dist/lottie-player.js"></script>

<!-- Somewhere far below... -->

<lottie-player src="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/pause/pause.json"
               background="transparent"
               style="width: 100%; height: 30vh;"
               speed="1"
               loop
               autoplay>
</lottie-player>

Just change the 1.4.1 from the source code above to 1.4.2 (last version):

<script src="https://unpkg.com/@lottiefiles/lottie-player@1.4.2/dist/lottie-player.js"></script>

You will notice that the Lottie player overflows and is broken:

alt text

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
karamaliecommented, Oct 27, 2021

Do update to 1.4.4. Small issue with the height being reduced by 35px. Fixed

1reaction
karamaliecommented, Oct 26, 2021

Hi @aleaforny . Please check if 1.4.3 fixes the issue for you. Pushed release to npm

Read more comments on GitHub >

github_iconTop Results From Across the Web

Safari 15.0 SVG sizing is off (also affecting https://lottiefiles.com)
Hi, I noticed today that Safari 15.0 seems to be ignoring the fixed pixel attribute width= and height= in the SVG within the...
Read more >
LottieAnimationView size won't change/is too small (iOS/Swift)
I think it's a bug with the lottie library. When I set the frame to be bigger, it does make the picture bigger....
Read more >
Lottie alignment and sizing - General - Forum | Webflow
If I set both to 100%, I get the proper size, but I can't manage to align it to the right. Flex or...
Read more >
Lottie Player - Interactivity Guide - LottieFiles
This is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add...
Read more >
ThemeNectar | Changelogs - Salient
1.6 (1/24/2021). Updated. Updated Salient Portfolio plugin to v1.6.2. Fixed Masonry portfolio layout to size correctly in WordPress 5.6. Updated ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found