gnab / remark

A simple, in-browser, markdown-driven slideshow tool.
http://remarkjs.com
MIT License
12.73k stars 857 forks source link

Images invisible when switching slides #586

Closed oliversturm closed 5 years ago

oliversturm commented 5 years ago

I was preparing a slide deck today using backslide, which uses remark. Some slides contain SVG images and I noticed strange behavior: the images are invisible when I switch to the slide, but may suddenly appear later. I've made the images pop up in two ways:

Exporting to PDF works correctly, presumably because slides are accessed via individual URLs. It came to my mind that the issue may be in the CSS animation used for transition, but the problem remains the same without that transition.

I have been able to reproduce this issue with various current versions of Chrome 76 and 77. I have also found that older versions of Chrome don't show the same problems. I have found a slide deck I created about six months ago, and while it was working correctly back then, it shows the same problem today. So the issue is certainly related to current Chromium builds (I also tried Brave, for instance).

Here is the deck I was testing with today: https://oliversturm.github.io/graphql-and-microservices

Source is at https://github.com/oliversturm/graphql-and-microservices/tree/master/docs

Any ideas appreciated!

EDIT: I forgot to state the obvious - I'm using remark 0.14.0 - still the newest version available, right?

oliversturm commented 5 years ago

I have fixed this issue by changing the rather outdated image layout CSS to more current flexbox based styles. I guess it is completely incidental that this works better now, but it solves the problem for me. I don't remember where my old image CSS stuff came from - I might have written it myself at some point - so I guess this problem may not be very specific to remark and I'll close the issue.