title: Why is the image not displayed after button click?
body: <p>I faced a problem so I created an example with styles that make no sense in this context : <a href="https://jsfiddle.net/demidyuk/ptm2sfrw/" rel="nofollow noreferrer">link</a>. The question is why clicking on the first button does not lead to the image being displayed while all works in the second case? The difference just in css property which should have the same behaviour.</p>
  <pre><code>transform: translate3d(0px, 0px, 0px);
  </code></pre>
  <pre><code>transform: translateY(0px);
  </code></pre>
  <p>So I need just an explanation (not how to fix it) why it works like this.
  I tested it in Chrome, my version is 88.0.4324.96.
  The most interesting thing is that after clicking the button, the image can appear after resizing the window.
  Thanks for your answers!</p>
  <p>I created <a href="https://jsfiddle.net/demidyuk/1x45pksj/1/" rel="nofollow noreferrer">one more example</a>  where changed the width and made the transform the same, the result almost as previous.</p>