Description of problem:
Since a while ago Kmail isn't displaying HTML messages correctly. It might be due to a specific message that has broken the system permanently. Similarly to what was reported in this other bug https://bugzilla.redhat.com/show_bug.cgi?id=134308

In the preview of the messages (before the program loads and displays the message contents), this partial message appears:

/*<![CDATA[*/ @import "main.css"; /*]]>*/ KMail 

Which seems to point to a problem with css processing. This makes sense, as the problem manifests itself with a lot of styles specifications displayed instead of processed, and therefore the message not displayed properly.

Here is an example of the css code displayed instead of processed for the message:

/* CLIENT-SPECIFIC STYLES */ /* fonts */ body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Arial, Helvetica, sans-serif; } table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } img { -ms-interpolation-mode: bicubic; } /* RESET STYLES */ img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } table { border-collapse: collapse !important; } body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } /* iOS BLUE LINKS */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* GMAIL BLUE LINKS */ u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } /* SAMSUNG MAIL BLUE LINKS */ #MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; } /* These rules set the link and hover states, making it clear that links are, in fact, links. */ /* Embrace established conventions like underlines on links to keep emails accessible. */ /* Reset Headers */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; } /* These rules adjust styles for desktop devices, keeping the email responsive for users. */ /* Some email clients don't properly apply media query-based styles, which is why we go mobile-first. */ @media screen and (min-width: 600px) { .intro { font-size: 24px !important; line-height: 36px !important; } .padding-footer { padding: 0 26px; } } @media screen and (max-width: 600px) { .padding-footer { padding: 0 43px; } } .float-container { border: 3px solid #fff; padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; border: 2px solid red; } .link-red-color { color: red; } .align-center { text-align: center; } .float-child.green { margin-right: 20px; } .column { float: left; width: 50%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } .column-x { float: left; width: 33.33%; background: red; } /* Clear floats after the columns */ .row-x:after { content: ""; display: table; clear: both; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; } .mt-5 { margin-top: 48px !important; } .mt-auto { margin-top: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 48px !important; } .mb-auto { margin-bottom: auto !important; } .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: 4px !important; } .pt-2 { padding-top: 8px !important; } .pt-3 { padding-top: 16px !important; } .pt-4 { padding-top: 24px !important; } .pt-5 { padding-top: 48px !important; } .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: 4px !important; } .pb-2 { padding-bottom: 8px !important; } .pb-3 { padding-bottom: 16px !important; } .pb-4 { padding-bottom: 24px !important; } .pb-5 { padding-bottom: 48px !important; } .pl-20 { padding-left: 20px !important; } .pr-20 { padding-right: 20px !important; } .columns_container{ width: 100%; } .two_columns_item,.three_columns_item,.four_columns_item{ float: left; } .three_columns_item { width: 32%; } .two_columns_item { width: 48.5%; } .four_columns_item { width: 23.5%; } .module_list_image { width: 33%; float: left; } .module_list_item { width: 61%; float: left; } .item_footer_accio { width: 20%; float: left; display: block; margin-left: 16%; margin-right: 4%; margin-bottom: 20px; } .item_footer_2030 { width: 20%; float: left; display: block; margin-right: 4%; margin-bottom: 20px; } .padding_desktop { padding: 40px 20px 40px 20px; } .item_footer_generalitat { width: 20%; float: left; display: block; margin-bottom: 20px; } .item_footer_europe { width: 28%; float: left; margin-left: 36%; display: block; } .three_columns_margin_right { margin-right: 2%; } .four_columns_margin_right { margin-right: 2%; } .two_columns_margin_right { margin-right: 3%; } .four_columns_margin_right_no_responsive { margin-right: 2%; } .outer { padding: 25px; } .generalitat_logos_footer { width: 60%; float: left; } .generalitat_logos_footer_img { margin: 6px 25px 0 auto; } .europea_logos_footer { width: 40%; float: left; } .europea_logos_footer_img { margin: 0 auto 0 0; } .four_columns_item_no_responsive { width: 23.5%; float: left; } .three_columns_item_no_responsive { width: 32%; float: left; } .two_columns_item_no_responsive { width: 48.5%; float: left; } .nota_al_peu { color: #808080; font-size: 14px; } .four_columns_item_no_responsive_all_inrow { width: 25%; float: left; } /* Media Queries */ @media screen and (max-width: 600px) { .column, .column-x, .four_columns_item, .three_columns_item, .two_columns_item { display: block; float: none; width: 100%; } .module_list_image { width: 100%; display: block; float: none; } .module_list_item { width: 100%; display: block; float: none; } .generalitat_logos_footer { width: 100%; float: none; } .generalitat_logos_footer_img { margin: 10px auto 15px auto; } .europea_logos_footer { width: 100%; float: none; } .item_footer_accio { width: 35%; float: none; display: block; margin-left: 32.5%; margin-right: 0; } .item_footer_2030 { width: 35%; float: left; display: block; margin-left: 15%; margin-right: 4%; margin-bottom: 5px; } .item_footer_generalitat { width: 35%; float: left; display: block; margin-bottom: 5px; } .item_footer_europe { width: 40%; float: left; margin-left: 30%; display: block; } .europea_logos_footer_img { margin: 0 auto; } .three_columns_item_no_responsive { width: 32%; float: left; } .two_columns_item_no_responsive { width: 48.5%; float: left; } .four_columns_item_no_responsive { width: 48.5%; float: left; } .padding_desktop { padding: 40px 0; } .four_columns_margin_right { margin-right: 3%; } .four_columns_margin_right_no_responsive { margin-right: 0; } } div.header { margin-bottom: 10pt ! important; } pre.highlightattachment { white-space: pre-wrap; } table.textAtm { margin-top: 10pt ! important; margin-bottom: 10pt ! important; } tr.textAtmH, tr.textAtmB, tr.rfc822B { font-weight: normal ! important; } tr.signInProgressH, tr.rfc822H, tr.encrH, tr.signOkKeyOkH, tr.signOkKeyBadH, tr.signWarnH, tr.signErrH { font-weight: bold ! important; } tr.textAtmH td, tr.textAtmB td { padding: 3px ! important; } table.rfc822 { width: 100% ! important; border: solid 1px black ! important; margin-top: 10pt ! important; margin-bottom: 10pt ! important; } table.textAtm, table.encr, table.signWarn, table.signErr, table.signOkKeyBad, table.signOkKeyOk, table.signInProgress, div.header table { width: 100% ! important; border-width: 0px ! important; line-height: normal; } div.inlineMessagePositive, div.inlineMessageInformation, div.inlineMessageWarning, div.inlineMessageError { margin: 0px 5% 10px 5% ! important; padding: 10px ! important; text-align: left ! important; line-height: normal; min-height: 48px; } hr { border: 0; height: 0; border-top: 1px solid rgba(35, 38, 41, 0.3); } div.quotelevelmark { position: absolute; margin-left:-10px; } @media screen { body { font-family: "Noto Sans" ! important; font-size: 19px ! important; color: #232629 ! important; background-color: #ffffff ! important; } a { color: #2980b9 ! important; text-decoration: none ! important; } a.white { color: white ! important; } a.black { color: black ! important; } table.textAtm { background-color: #232629 ! important; } tr.textAtmH { background-color: #ffffff ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.textAtmB { background-color: #ffffff ! important; } table.signInProgress, table.rfc822 { background-color: #ffffff ! important; } tr.signInProgressH, tr.rfc822H { font-family: "Noto Sans" ! important; font-size: 19px ! important; } table.encr { background-color: #a3b8cc ! important; } tr.encrH { background-color: #cce6ff ! important; color: #00407f ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.encrB { background-color: #f9fcff ! important; } table.signOkKeyOk { background-color: #b0c8b9 ! important; } tr.signOkKeyOkH { background-color: #ddfbe8 ! important; color: #27ae60 ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.signOkKeyOkB { background-color: #f8fbf9 ! important; } table.signOkKeyBad { background-color: #cbc1bb ! important; } tr.signOkKeyBadH { background-color: #fef1ea ! important; color: #f67400 ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.signOkKeyBadB { background-color: #fefdfc ! important; } table.signWarn { background-color: #cbc1bb ! important; } tr.signWarnH { background-color: #fef1ea ! important; color: #f67400 ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.signWarnB { background-color: #fefdfc ! important; } table.signErr { background-color: #c8bcbd ! important; } tr.signErrH { background-color: #faeced ! important; color: #da4453 ! important; font-family: "Noto Sans" ! important; font-size: 19px ! important; } tr.signErrB { background-color: #faf9f9 ! important; } div.inlineMessagePositive { border: 1px solid rgba(39, 174, 96) ! important; border-radius: 2px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); background-color: rgba(39, 174, 96, 0.2) ! important; } div.inlineMessagePositive a:link { color: #2980b9 ! important; text-decoration: none ! important; } div.inlineMessageInformation { border: 1px solid rgba(61, 174, 233) ! important; border-radius: 2px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); background-color: rgba(61, 174, 233, 0.2) ! important; } div.inlineMessageInformation a:link { color: #2980b9 ! important; text-decoration: none ! important; } div.inlineMessageWarning { border: 1px solid rgba(246, 116, 0) ! important; border-radius: 2px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); background-color: rgba(246, 116, 0, 0.2) ! important; } div.inlineMessageWarning a:link { color: #2980b9 ! important; text-decoration: none ! important; } div.inlineMessageError { border: 1px solid rgba(218, 68, 83) ! important; border-radius: 2px; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); background-color: rgba(218, 68, 83, 0.2) ! important; } div.inlineMessageError a:link { color: #2980b9 ! important; text-decoration: none ! important; } div.header { font-family: "Noto Sans" ! important; font-size: 19px ! important; } div.senderpic{ padding: 0px ! important; font-size:0.8em ! important; border:1px solid #eff0f1 ! important; background-color:#3daee9 ! important; } div.senderstatus{ text-align:center ! important; } div.quotelevel1 { color: #219150 ! important; font-style: italic ! important; } div.quotelevel2 { color: #1a7440 ! important; font-style: italic ! important; } div.quotelevel3 { color: #145730 ! important; font-style: italic ! important; } div.deepquotelevel1 { color: #219150 ! important; font-style: italic ! important; } div.deepquotelevel2 { color: #1a7440 ! important; font-style: italic ! important; } div.deepquotelevel3 { color: #145730 ! important; font-style: italic ! important; } blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } .quotemarks{ color:transparent; font-size:0px; } .quotemarksemptyline{ color:transparent; font-size:0px; line-height: 12pt; } input[type=checkbox].addresslist_checkbox {display: none} .addresslist_label_short {border: 1px; border-radius: 5px; padding: 0px 10px 0px 10px; white-space: nowrap} .addresslist_label_full {border: 1px; border-radius: 5px; padding: 0px 10px 0px 10px; white-space: nowrap} .addresslist_label_short {background-image:url(file:///usr/share/libmessageviewer/pics/quicklistClosed.png); background-repeat: no-repeat} .addresslist_label_full {background-image:url(file:///usr/share/libmessageviewer/pics/quicklistOpened.png); background-repeat: no-repeat} input ~ span.fullFullCcAddressList {display: block} input ~ span.shortFullCcAddressList {display: none} input:checked ~ span.fullFullCcAddressList {display: none} input:checked ~ span.shortFullCcAddressList {display: block} input ~ span.fullFullToAddressList {display: block} input ~ span.shortFullToAddressList {display: none} input:checked ~ span.fullFullToAddressList {display: none} input:checked ~ span.shortFullToAddressList {display: block} input ~ span.fullFullBccAddressList {display: block} input ~ span.shortFullBccAddressList {display: none} input:checked ~ span.fullFullBccAddressList {display: none} input:checked ~ span.shortFullBccAddressList {display: block} } @media print { body { font-family: "Noto Sans" ! important; font-size: 10pt ! important; color: #000000 ! important; background-color: #ffffff ! important } a { color: #2980b9 ! important; text-decoration: none ! important; } tr.textAtmH, tr.signInProgressH, tr.rfc822H, tr.encrH, tr.signOkKeyOkH, tr.signOkKeyBadH, tr.signWarnH, tr.signErrH, div.header { font-family: "Noto Sans" ! important; font-size: 10pt ! important; } div.spamheader { display:none ! important; } div.inlineMessagePositive, div.inlineMessageInformation, div.inlineMessageWarning, div.inlineMessageError { display:none ! important; } div.senderpic{ font-size:0.8em ! important; border:1px solid black ! important; background-color: ! important; } div.senderstatus{ text-align:center ! important; } div.noprint { display:none ! important; } blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #219150; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #1a7440; unicode-bidi: plaintext } blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote blockquote { margin: 4pt 0 4pt 0; padding: 0 0 0 1em; border-left: 2px solid #145730; unicode-bidi: plaintext } .quotemarks{ color:transparent; font-size:0px; } .quotemarksemptyline{ color:transparent; font-size:0px; line-height: 12pt; } input[type=checkbox].addresslist_checkbox {display: none} .addresslist_label_short {border: 1px; border-radius: 5px; padding: 0px 10px 0px 10px; white-space: nowrap} .addresslist_label_full {border: 1px; border-radius: 5px; padding: 0px 10px 0px 10px; white-space: nowrap} .addresslist_label_short {background-image:url(file:///usr/share/libmessageviewer/pics/quicklistClosed.png); background-repeat: no-repeat} .addresslist_label_full {background-image:url(file:///usr/share/libmessageviewer/pics/quicklistOpened.png); background-repeat: no-repeat} input ~ span.fullFullCcAddressList {display: block} input ~ span.shortFullCcAddressList {display: none} input:checked ~ span.fullFullCcAddressList {display: none} input:checked ~ span.shortFullCcAddressList {display: block} input ~ span.fullFullToAddressList {display: block} input ~ span.shortFullToAddressList {display: none} input:checked ~ span.fullFullToAddressList {display: none} input:checked ~ span.shortFullToAddressList {display: block} input ~ span.fullFullBccAddressList {display: block} input ~ span.shortFullBccAddressList {display: none} input:checked ~ span.fullFullBccAddressList {display: none} input:checked ~ span.shortFullBccAddressList {display: block} } 

The message appears after all this coding.

Version-Release number of selected component (if applicable):
kontact 5.24.5 (but it also was happening with Fedora 37 (it started then). I have just upgraded to Fedora 39 in hope for the problem solving itself. But it hasn't.


How reproducible: it happens in every email message, either in the preview window or in the message window.


Steps to Reproduce:
1. Some message breaks the css rendering system
2. All messages are displayed without correct formatting and instead display all the formatting code at the start of the message.
3.

Actual results: all messages are displayed without correct html formatting


Expected results: the html messages should be displayed with the corresponding css formatting.


Additional info: the problem started with Fedora 37, it hasn't disappeared even despite applying all updates. I have even tried to reinstall all Kontact components including Kmail. I have even upgraded to Fedora 39, but the problem persists.