Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change CSS so invisble fragments don't steal click focus #845

Closed
wants to merge 1 commit into from

Conversation

@maxlinc
Copy link

maxlinc commented Mar 21, 2014

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 added a commit that referenced this pull request Mar 25, 2014
@hakimel

This comment has been minimized.

Copy link
Owner

hakimel commented Mar 25, 2014

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

@hakimel hakimel closed this Mar 25, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.