codidact / qpixel

Q&A-based community knowledge-sharing software
https://codidact.com
GNU Affero General Public License v3.0
385 stars 69 forks source link

Bulleted lists are missing their bullets on some Mac/iOS browsers #1240

Open cellio opened 9 months ago

cellio commented 9 months ago

meta:288679

This post with a bulleted list does not show the bullets in iOS Firefox (per the report) or MacOS Safari (I've reproduced). They do show in the edit preview, so that's a place to look for differences in the HTML being generated.

https://github.com/codidact/qpixel/issues/982 and https://github.com/codidact/qpixel/issues/787 are also about iOS/MacOS-specific rendering problems. Some comments suggest it's a problem with WebKit browsers not fully supporting ::marker, maybe. (Your humble bug-wrangler doesn't really understand that but is dutifully recording it.)

ws909 commented 9 months ago

Everything renders correctly in Firefox on Windows 10, as well as FF on MacOS (actually, the page's background colour is incorrect there, but that's a separate issue).

From a related debugging session in Safari (MacOS) in chat:

The bug is present on one of the other answers, on both MacOS and iOS. These two posts where the bug is present, are only using * to start bullet points. There are two other posts where there's no issue with the rendering; one of them also only uses *, while the other one uses both * and -. So these are probably unrelated.

The bullet points are rendered correctly in the edit preview, so the issue could be related to how posts are rendered on the normal Q/A page, but there's seemingly not much difference between the preview page, and Q/A page. Also, half the posts are rendered correctly on the Q/A page, so that's confusing.

The web inspector shows identical CSS to be applied in both versions (Q/A and preview), except for word-break: break-word being applied in the buggy version, but that should have no effect, and disabling it makes no difference.

Using the web inspector to set list-style-type: disc; display: list-item makes no difference. Using display: none hides the entire list item (including the text). (tested on both the <ul> and <li>.

It could be an issue with ::marker, however, I don't know why it would apply seemingly to posts at random.