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.

Doesn't show anything if any parent uses `display: grid;`

See original GitHub issue

If there’s a parent that uses display: grid; then this library doesn’t seem to render anything. I think it may have something to do with the max-height: -webkit-fill-available; that’s set on the img, as when I uncheck that it everything shows up.

Changing everything from Grid and adapting it to use Flexbox makes it work also.

https://codesandbox.io/s/ryz8x7j8xq

After a little more testing it appears to break in:

Chrome Version 67.0.3396.99
Chrome Version 68.0.3440.84

But works in:

Firefox Version 61.0.1
Safari Version 11.1.1

Issue Analytics

State:
Created 5 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

Rainbowlemoncommented, Aug 15, 2018

I’ve just come across the same issue. Temporary fix was to just add max-height: inherit.

0reactions

DominicTobiascommented, May 20, 2019

Ah that’s a shame, there’s not much I can do as fill-available is preferred in all cases where this isn’t a bug! I think for now you’ll just have to turn it off with CSS as you’ve done.