2

Given the below formatting,

  • on a Mac Safari, version 15.6.1 (17613.3.9.1.16)
  • as well as on an iPhone Safari, version 15.6.1

This Markdown:

- ```
  code
  ```

Loses the bullet on Safari:

Screenshot of the bullet missing from beside the code block on Safari

On your browser, it renders as:

  • code
    

I know there are solutions to go around that:

 -  
   ```
   code
   ```

<!-- or -->

 - Some text here
   ```
   code
   ```

Which both render the bullet point properly:

  •  
    code
    
  • Some text here
    code
    

But, from time to time, I wish the first snippet would render a bullet point and code block on the same line, as expected.
Is there a proper way to have a code block on the same line as a bullet point?

10
  • 2
    No-repro on Chrome. After "It renders as", I see a bullet point in front of the code block.
    – Cerbrus
    Commented Aug 23, 2022 at 14:03
  • 1
    No repro on Firefox 103.0.2 (which is old... why haven't I updated..?)... Not repro'd on 104.0 either.
    – Thom A
    Commented Aug 23, 2022 at 14:04
  • 1
    Let me add the browser information then, should be a bug on Safari Commented Aug 23, 2022 at 14:05
  • 1
    On Firefox 103 on Windows 10: i.sstatic.net/yokT0.png The dot is there but it's at the bottom of the block. Looks a bit broken. In Chrome 104 it's in the middle of the block: i.sstatic.net/d3BJI.png
    – VLAZ
    Commented Aug 23, 2022 at 14:05
  • 1
  • 2
    Given that the HTML and CSS are identical for all browsers, it seems like this is a bug you should report to Apple/Safari, rather than here. Yes, SE could, probably, do a work-around, but they really shouldn't have to. This is very similar to the images posted by @VLAZ above of the difference in Firefox 103 and Chrome 104. The issue which Firefox 103 shows for these, which can be quite a bit worse under other conditions, was reported here, but it wasn't a bug in SE's HTML/CSS. It's a bug in Firefox, which only Mozilla can fix. This appears likely to be similar, but a bug in Safari.
    – Makyen Mod
    Commented Aug 23, 2022 at 17:33
  • 1
    I'd need to do more investigation specifically on Safari to figure out what the bug really is, and to confirm that it's definitely in Safari, but this has the feel of being a browser bug, rather than a bug with SE doing something that needs to have browser-specific adaptations. OTOH, that doesn't mean it's not something which SE should account for and work-around in Safari.
    – Makyen Mod
    Commented Aug 23, 2022 at 17:36
  • @Makyen Yes, it's a browser issue. Or, likely, this specific interaction of HTML is probably not standardised as we see three different behaviours in three different browsers. SE can probably patch it up to get a more consistent look but I'm not really sure they need to.
    – VLAZ
    Commented Aug 23, 2022 at 18:22
  • 1
    @VLAZ The issue in Firefox is definitely an actual bug in Firefox, rather than a choice in rendering where it's unspecified. IIRC, it's that Firefox mis-applies N times the padding-top as a shift down for the marker for <li> elements, but only when another specific CSS property is also applied. I looked into it the last time it was reported, not all that long ago, and left a comment describing what was happening in more detail. Unfortunately, I'm not quickly finding that comment.
    – Makyen Mod
    Commented Aug 23, 2022 at 18:44
  • 1
    A minimal HTML repo: <ul><li><pre style="overflow:hidden;">code. Something about the overflow causes the bullet to disappear on Safari. No clue why. Commented Aug 24, 2022 at 0:39

0

You must log in to answer this question.

Browse other questions tagged .