gnab/remark

Images invisible when switching slides

Closed this issue · 1 comments

oliversturm commented

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:

  • When running the deck locally using backslide, I was able to reload any individual page and it would come up correctly, including the image.
  • The web-hosted slide deck doesn't show the slide on reload, but I was able to bring up the developer tools and simply toggle one of the layout options on the image or its container (not every single one does the trick, but most work) - just switch any CSS option off and on again, and suddenly the image is there.

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

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.