jupyter / jupyter/notebook

Potential CSS inheritance issue

Open
#6,000 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
Jupyter Notebook
Stars
13.3k
Forks
5.8k
Avg merge
6d 11h
Merged PRs (30d)
7

Description

**Describe the bug**
The letter 'l' in Chrome is displaying as a capital "L" within comment blocks in Jupyter notebook. The letter displays in its proper case outside of the comment block, and copying the text out of Jupyter and into an outside text editor shows that it is storing the correct case in the document. Opening the same Jupyter notebook in Firefox displays without issue. Exporting the notebook as HTML and opening the HTML file in Chrome/Firefox will yield the same result.

**To Reproduce**
Steps to reproduce the behavior:
1. Create a Jupyter Notebook document
2. Create a 'Code' block cell
3. Enter a comment that contains the letter 'l' ('L')
4. Note the display in Chrome
5. Save the document
6. Connect to the Jupyter server from Firefox
7. Open the document
8. Note the proper display of the letter 'l'/'L'

**Expected behavior**
The letter 'l' should properly display its case.

**Screenshots**
![Jupyter_L_issue](https://user-images.githubusercontent.com/80015202/109896931-d7d91e80-7c5f-11eb-9488-4e890940784e.png)

**Desktop (please complete the following information):**
- OS: Windows10, version 2004 (OS Build 19041.804)
- Browser Chrome 88.0.4324.190, Chrome 89.0.4389.72, Firefox 84.0.2, Firefox 86.0

**Output from Version info in Jupyter**
_You are using Jupyter notebook.

The version of the notebook server is: 6.1.4
The server is running on this version of Python:
Python 3.8.5 (default, Sep 3 2020, 21:29:08) [MSC v.1916 64 bit (AMD64)]

Current Kernel Information:
Python 3.8.5 (default, Sep 3 2020, 21:29:08) [MSC v.1916 64 bit (AMD64)]
Type 'copyright', 'credits' or 'license' for more information
IPython 7.19.0 -- An enhanced Interactive Python. Type '?' for help._

**Additional context**
Another student has suggested the following as a probable cause:
_"It is appending this inline CSS:
**.highlight .c1 {color: var(--jp-mirror-editor-comment-color);/* font-style: italic; */} /* Comment.Single */**
Basically those boxes will be italicized in Google Chrome, but not in other browsers
It's not based on user agent. It is CSS inheritance. Firefox and Chrome are evaluating the CSS in different orders.
It's a bug with CSS and either Chrome or Firefox is evaluating it incorrectly. Cannot tell which one it is at the moment."_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.