12

Yesterday I made an edit that produced some unexpected output. It seems that when an item in an ordered or unordered list begins with a code block, in (at least) Firefox (but not Chrome) the list item marker is not vertically aligned with the content of the list item. As you can see in the first screenshot below, for such list items the marker appears to be aligned between the first and second line of code, and when there is only one line of code the marker appears to be aligned with the bottom of the item content. @Laurel also reports in the comments that for such list items the marker is missing entirely in Chrome and Safari for iOS.

Markdown input

1. The first list item is one line of text.
2. ```lang-c
   /* The second list item is one line of code. */
   ```
3. The third list item is three lines of text.

   The third list item is three lines of text.

   The third list item is three lines of text.
4. ```lang-c
   /* The fourth list item is three lines of code.
      The fourth list item is three lines of code.
      The fourth list item is three lines of code. */
   ```
5. The fifth list item is one line of text followed by three lines of code.
   ```lang-c
   /* The fifth list item is one line of text followed by three lines of code.
      The fifth list item is one line of text followed by three lines of code.
      The fifth list item is one line of text followed by three lines of code. */
   ```
6. ```lang-c
   /* The sixth list item is three lines of codes followed by one line of text.
      The sixth list item is three lines of codes followed by one line of text.
      The sixth list item is three lines of codes followed by one line of text. */
   ```
   The sixth list item is three lines of codes followed by one line of text.

Markdown output

Incorrectly aligned list item markers in 64-bit Firefox v101.0.1 for Windows

Screenshot of 64-bit Firefox v101.0.1 for Windows showing that for Markdown list items that begin with a code block the list item marker is not vertically aligned with the list item content.

Correctly aligned list item markers in 64-bit Chrome v102.0.5005.115 for Windows

Screenshot of 64-bit Firefox v102.0.5005.115 for Windows showing that for Markdown list items that begin with a code block the list item marker is vertically aligned with the list item content.

Missing list item markers in Chrome for iOS

Screenshot of Google Chrome for iOS showing that for Markdown list items that begin with a code block the list item marker is missing.

Your browser

  1. The first list item is one line of text.

  2. /* The second list item is one line of code. */
    
  3. The third list item is three lines of text.

    The third list item is three lines of text.

    The third list item is three lines of text.

  4. /* The fourth list item is three lines of code.
       The fourth list item is three lines of code.
       The fourth list item is three lines of code. */
    
  5. The fifth list item is one line of text followed by three lines of code.

    /* The fifth list item is one line of text followed by three lines of code.
       The fifth list item is one line of text followed by three lines of code.
       The fifth list item is one line of text followed by three lines of code. */
    
  6. /* The sixth list item is three lines of codes followed by one line of text.
       The sixth list item is three lines of codes followed by one line of text.
       The sixth list item is three lines of codes followed by one line of text. */
    

    The sixth list item is three lines of codes followed by one line of text.

8
  • Is this a question? Or are you reporting a bug in Firefox? Either way I don't see what Stack Overflow can do about it.
    – TylerH
    Jun 15, 2022 at 14:05
  • 2
    @TylerH This is the first time I've observed this behavior on Stack Overflow or on any site in any browser, so it seemed natural to report it here. Do you have specific insight into this definitely not being an issue with Stack Overflow/Exchange or some component it uses? It seems like it can only be helpful to get the issue documented so the developers know about it and in case some other user comes across it. For all I know even if it is a browser bug they'll deem it (unlikely, yes) so significant as to implement a workaround. I don't know, hence the post. Jun 15, 2022 at 17:25
  • 1
    All of the even numbers are missing for me on mobile Chrome.
    – Laurel
    Jun 15, 2022 at 17:40
  • @Laurel What version and platform is that for Chrome? It looks fine for me on v102.0.5005.78 for Android. Jun 15, 2022 at 18:20
  • I checked some more and I think it's an iOS thing, since it also happens on Safari.
    – Laurel
    Jun 15, 2022 at 18:24
  • @LanceU.Matthews The fact that it works correctly on Chrome but not on Firefox indicates it is likely a browser-specific issue. Your post doesn't specify so I have to assume the behavior is the same when copied to other sites as well. If that's not the case please edit the post to clarify that this is specific to Stack Overflow.
    – TylerH
    Jun 15, 2022 at 19:04
  • 2
    In Firefox, a multiple of the padding-top for the <pre>, which is the first element in the <li>, is used for the ::marker instead of the actual padding-top. For the issue to occur, either overflow-x and/or overflow-y needs to be set on the <pre> such that scrolling may occur (auto is used by SE). As long as the above two CSS properties are set (padding-top and overflow), this is reproducible independent of SE's CSS. Overall, I'd say this is a bug in Firefox. I tested in Firefox 101.0.0. This is not nearly as noticeable without the 12px SE uses for padding code blocks.
    – Makyen Mod
    Jun 15, 2022 at 20:47
  • I've closed this because A) the bugs were a few different issues in different browsers (i.e. they were browser bugs). B) The browsers appear to have resolved the issues (at least Firefox has). Unfortunately, I'm unable to test in Chrome for iOS. Please re-test in that browser. If the problem still exists, I'll reopen the question, but it should then be modified to indicate that the Firefox issue has been resolved.
    – Makyen Mod
    Feb 19 at 17:11

0

Browse other questions tagged .