Change CSS so invisble fragments don't steal click focus

[maxlinc]

In the example below, there is a editable code block that has a fragment of lorem ipsum text overlaid on top of it. Currently, the lorem ipsum text is clickable even when it's hidden, so it steals the clicks and effectively negates the "contenteditable" attribute. Telling the browser to not display hidden fragments (rather than just making them completely transparent) seems to solve this problem so that the lorem ipsum text is not clickable until it is displayed.

<section>
  <div style="position: relative;">
    <pre style="position: absolute; left: 25px; top: 30px; z-index: 1; background-color: rgb(63, 63, 63); overflow: visible;" class="fragment">
       Exception!
        <font color="red">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </font>
    </pre>
    <pre><code data-trim contenteditable>
#include &lt;stdio.h&gt;
#include &lt;stdlib.h&gt;

int main(void)
{
  printf("Hello, world\n");
  return EXIT_SUCCESS;
}
    </code></pre>
  </div>
</section>

[hakimel]

Thanks for the PR. Changing the display mode isn't ideal since it affects the flow of content. I've applied the same fix using visibility instead: 7529f7e