Potential CSS inheritance issue
- 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**

**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
Assessment
This issue has not been assessed yet.