Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

It appears that annotations are not working within data tables for me, I'm following https://squidfunk.github.io/mkdocs-material/reference/annotations/#in-everything-else for how to implement them.

(Feels weird ticking the problem doesn't occur with the mkdocs or readthedocs themes when the feature is specific to the mkdocs-material theme - but it's a required task item!)

Expected behaviour

An annotation should appear when clicking on the annotation 'x' within the data table.

Actual behaviour

For annotations within data tables, the 'x' animates a colour change and rotation but the annotation itself does not appear.
Annotations within quotes, content tabs etc. work as expected. Even though they use the div method as well.
Screen recording

In dev console (could be a red herring):

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') bundle.028d81b4.min.js:3
    at bundle.028d81b4.min.js:3:47143
    at bundle.028d81b4.min.js:3:19619
    at t.u._next (bundle.028d81b4.min.js:3:6427)
    at t.next (bundle.028d81b4.min.js:3:3140)
    at d (bundle.028d81b4.min.js:3:31344)
    at bundle.028d81b4.min.js:3:31424
    at t.u._next (bundle.028d81b4.min.js:3:6427)
    at t.next (bundle.028d81b4.min.js:3:3140)
    at bundle.028d81b4.min.js:3:8122
    at Ze (bundle.028d81b4.min.js:3:2783)

After commenting the lines for the data table and it's div - the error will still be present if any other instance of <div class="annotate" markdown> is present, like:

<div class="annotate" markdown>

> Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

</div>

Steps to reproduce

Insert the following into an .md page:

<div class="annotate" markdown>

| Method   | Description                             |
| -------- | --------------------------------------- |
| `GET`    | :material-check:     Fetch resource (1) |
| `PUT`    | :material-check-all: Update resource    |
| `DELETE` | :material-close:     Delete resource    |

</div>

1.  :man_raising_hand: I'm an annotation!

Package versions

• Python: Python 3.8.10
• MkDocs: mkdocs, version 1.2.3 from /home/redacted/.local/lib/python3.8/site-packages/mkdocs (Python 3.8)
• Material: Version: 8.1.6+insiders.4.6.0

Configuration

site_name: Test Docs
theme:
  name: material
markdown_extensions:
  - admonition
  - abbr
  - attr_list
  - def_list
  - footnotes
  - meta
  - md_in_html
  - toc:
      permalink: true
  - pymdownx.caret
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.smartsymbols
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tilde
features:
  - content.code.annotate

System information

• Host operating system: Windows Subsystem for Linux (Ubuntu), uname -r: 4.4.0-19041-Microsoft
• Client operating system: Windows 10 20H2
• Browser: Mozilla Firefox 95.0.2 (64-bit)
• Browser: Microsoft Edge (Chromium) 97.0.1072.55 (Official build) (64-bit)