quarto-dev / quarto-dev/quarto-cli

Code annotation numbers overlap in HTML in Safari

Open
#6,387 15 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug code-annotation html third-party
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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")

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by rendering the provided qmd reproducer and comparing the annotation HTML and CSS behavior in Safari and Chrome. The issue is done when multiple code annotation numbers remain aligned and do not overlap in Safari.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.