gatsby-remark-images hide images

[smashou]

My Gatsby is updated, In my markdown I have

<img src="./picture.jpg" alt="some text" title="some text" />

It transform to:

<a class="gatsby-resp-image-link" href="/static/ca9939aac88b9e8393268a11756830a6-7aab6.jpg" style="display: block" target="_blank" rel="noopener">
  
  <span class="gatsby-resp-image-wrapper" style="position: relative; z-index: -1; display: block; ">
    <span class="gatsby-resp-image-background-image" style="padding-bottom: 66.39999999999999%;position: relative; width: 100%; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAMEAgX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABZuW1EnNC/8QAGxAAAgMAAwAAAAAAAAAAAAAAAQIAAxESEyH/2gAIAQEAAQUCNiiIDx7FjPNyp/H/AP/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAgBAwEBPwGRj//EABcRAQADAAAAAAAAAAAAAAAAAAABAhL/2gAIAQIBAT8Bmzb/xAAbEAABBAMAAAAAAAAAAAAAAAAAAQIRURASYf/aAAgBAQAGPwKza8RA3op//8QAGhAAAwEBAQEAAAAAAAAAAAAAAAERITFRkf/aAAgBAQABPyHgfBqq6GpyMlfDtE0owHu9P//aAAwDAQACAAMAAAAQq8//xAAXEQEAAwAAAAAAAAAAAAAAAAAAAREx/9oACAEDAQE/EIcVf//EABYRAQEBAAAAAAAAAAAAAAAAAAEAMf/aAAgBAgEBPxBNlX//xAAcEAEAAwACAwAAAAAAAAAAAAABABEhMWFx0fD/2gAIAQEAAT8QA3bcZCMXvAboqMkKdHuUuQ0+PEzthHOmLSM5Gp//2Q=='); background-size: cover; display: block;">
      <img class="gatsby-resp-image-image" style="width: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;" alt="some text" title="some text" src="/static/ca9939aac88b9e8393268a11756830a6-f1fc0.jpg" srcset="/static/ca9939aac88b9e8393268a11756830a6-03232.jpg 240w,
/static/ca9939aac88b9e8393268a11756830a6-95297.jpg 480w,
/static/ca9939aac88b9e8393268a11756830a6-f1fc0.jpg 960w,
/static/ca9939aac88b9e8393268a11756830a6-90f62.jpg 1440w,
/static/ca9939aac88b9e8393268a11756830a6-7aab6.jpg 1500w" sizes="(max-width: 960px) 100vw, 960px">
    </span>
  </span>
  
  </a>

Everything seems fine except I don't see my image. I think it's about the z-index: -1 on the first span.

[fk]

HI @smashou, that z-index should be just fine …
Could you provide a live URL that we can take a look at?
What browsers have you tested in?
Maybe your project contains other styles that somehow override/conflict with the inline styles?

[3axap4eHko]

@smashou @fk the same issue I described here #1888. As a fix I used

{
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 360,
          wrapperStyle: 'z-index: 1'
        },
      }

in the plugin config

[smashou]

@fk It might be because I use the Bootstrap 4 reset and grid modules ? But could not find anything overriding this...

Tested on: Safari (Last), Chrome (Last), Firefox (Last).
This site is under dev but I'll try to put it online for your tests.

@3axap4eHko Thanks a lot for this tips it works !

[fk]

@3axap4eHko @smashou Yay community effort, glad this resolved so quickly! 👍

@3axap4eHko Damn, the z-index in #1888 totally went past me, I focused solely on the undefined href … sorry! :-/

I think we should update the README for gatsby-remark-images to make people aware of the default styles and z-index: -1.

@smashou If it's possible, an online version to dissect still would be cool. Would love to find out what exactly is causing problems for you and update that README a least a little more informed. ✌️ @3axap4eHko For the same reason – is your project available online?

[3axap4eHko]

@fk nope, while the project has childhood diseases yet, I'm not ready to publish it

[smashou]

@fk you can find a sample page here still WIP.

You'll see that I have added the @3axap4eHko fix "z-index: 1". If you set back z-index:-1 picture disapear

[fk]

@smashou Thank you, will take a look ASAP!

[fk]

I have to take back my previous statement – that negative z-index there is not "fine". 🙈 😄
As identified by @3axap4eHko, it indeed is the cause of the issue.
Furthermore, if I understand things correctly, it's not needed to facilitate the "blur up" functionality that gatsby-remark-images automagically provides.

My suspicion is that it's a leftover that simply didn't cause problems for more people until now because they didn't set any background-color for parent elements (see https://www.gatsbyjs.org/blog/) and/or their stacking context worked out in favor of gatsby-remark-images. Or maybe they were working around it silently already.

I will create a PR that removes z-index: -1 and explains things further.
After that, things should just work out of the box.

Thanks again for bringing this up @3axap4eHko and @smashou, and sorry for not being more attentive in regards to #1888.

[smashou]

Thanks a lot for your work and the fix @fk

[Defite]

Well, now this fix hides "blurry" background-image in span :(

[KyleAMathews]

Could you provide more details?

[Defite]

I've already found the problem: image with class gatsby-resp-image-image has inline css:

box-shadow: inset 0px 0px 0px 400px #fff;

I had to change the color of shadow to transparent in gatsby config like this:

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1440,
              linkImagesToOriginal: false,
              backgroundColor: 'transparent'
            },
          },
        ],
      },
    },

Then it works as expected.

[fk]

Will take another look at this @Defite @KyleAMathews

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!