Skip to content

Code annotation numbers overlap in HTML in Safari #6387

Open
@martinfleis

Description

@martinfleis

Bug description

When adding multiple code annotations to a single Python block in qmd, the HTML output does not work properly in safari, causing overlapping and misaligned numbers.

Steps to reproduce

---
title: "Reproducer"
format: html
---

Introduction to issue

```{python}
a = 1 + 1 # <1>
b = "foo"  # <2>
c = "bar"  # <3>
d = "baz"  # <4>
```
1. It is two.
2. foo
3. bar
4. baz

Expected behavior

It should look like this, when looking at it from Chrome:
Screenshot 2023-07-31 at 20 47 24

Actual behavior

It looks like this:

Screenshot 2023-07-31 at 20 47 50

If you zoom in, you see that 1 is under 2. Seems like a CSS issue to me.

Your environment

  • IDE: VSCode (but that is irrelevant I guess)
  • OS: macOS Ventura 13.4.1
  • Safari 16.5.2

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.6: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.4: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.274
      Path: /Applications/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.10.11 (Conda)
      Path: /Users/martin/mambaforge/envs/stable/bin/python
      Jupyter: 5.3.0
      Kernels: stable, dask_gpd_dev, proceedings, momepy-minimal, geopython_tutorial, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.1.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.1-arm64/Resources/library
      knitr: 1.37
      rmarkdown: (None)

      The rmarkdown package is not available in this R installation.
      Install with install.packages("rmarkdown")

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingcode-annotationhtmlIssues with HTML and related web technology (html/css/scss/js)third-partyIssues involving interaction with a third-party library

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions