Description
I've just noticed that the html produced for <ul> items differs between slides when using incremental markers.
Some background
I'm trying to change the spacing between the preceding paragraph and the first list item for tight lists, (i.e. when there is no blank line between the paragraph and list items), e.g.:
A list:
- list item
- list item 2
As far as I can tell can be achieved with this CSS:
p { margin-block-end: 0.2em; }
ul { margin-block-start: 0.2em; }
This works fine, and handles both tight lists and 'wide' lists (with blank lines between list items) as expected:
| no blank lines | with blank lines |
|---|---|
 |
 |
But when using blank lines between list items, and an incremental marker, e.g.
A list
- list item
--
- list item 2
There is a clear shift in position between the first and second slide, as illustrated below:
| first slide | second slide |
|---|---|
 |
 |
Investigating the generated HTML
I've had a go at investigating what's going on, and I think this is due to difference in the html produced for the first and second slides. In more detail:
With this markdown (tight list):
A list:
- list item
- list item 2
I get the following html (using Google Chrome's inspect functionality):
<ul>
<li>list item</li>
<li>list item 2</li>
</ul>
For 'wide' list, I can use this markdown:
A list
- list item
- list item 2
which produces this html:
<ul>
<li><p>list item</p>
</li>
<li><p>list item 2</p>
</li>
</ul>
The difference here is that the contents of the list items are now encased in <p> tags. So far so good.
The problem is when adding an incremental marker in between the two list items. With this markdown:
A list
- list item
--
- list item 2
I get this for the first slide:
<ul>
<li>list item</li>
</ul>
but this on the second slide:
<ul>
<li><p>list item</p>
</li>
<li><p>list item 2</p>
</li>
</ul>
Note that on the first slide, the first list item is not encased in a <p> tag, while on the second slide, that same list item now has a <p> tag.
This problem only occurs with the incremental marker, and is only an issue because that first slide lacks the enclosing <p> tags around the list item contents. And the issue only manifests with modified CSS styling...
I'd be willing to dig around to figure out where the issue is, but I've no experience with JavaScript, and no idea where to start looking... Any pointers (or even better, solutions!) would be greatly appreciated.