::first-letter in print style can cause incorrect rendering in Chrome

[patrickhlauke]

I'm submitting a ...

• bug report
• feature request
• other (Please do not submit support requests here (below))

Chrome currently has a bug that results in ::first-letter being vertically misaligned under certain (seemingly unrelated) conditions. See this fairly long-standing Bootstrap bug twbs/bootstrap#21771

There is an issue in Chrome's bug tracker - however, for some reason, the issue was recently locked/restricted (possibly because it has security implications). The bug is/was https://bugs.chromium.org/p/chromium/issues/detail?id=739800, filed a few days ago (I've asked contacts at Google if it would be possible to un-restrict the bug again).

For Bootstrap, I'm likely going to simply remove the ::first-letter and ::first-line selectors since BS doesn't mess with any of those (see twbs/bootstrap#23044)

[coliff]

Interesting. I think it'd make sense to remove ::first-letter and ::first-line selectors from the print styles until the Chrome issue is resolved then as it does look pretty messed up. I'll open a PR. Thanks for heads-up!

[roblarsen]

Thanks @patrickhlauke and @coliff 🥇

[roblarsen]

closed via #1962

[slackday]

Nice that this has been removed. I've been trying to fix it in projects using this build of Bootstrap. For anyone else using alpha/beta builds of Bootstrap and needs to fix this issue you can add

@media print {
  *::first-letter {
    position: relative !important; 
  }
}

to your project stylesheet.