Rendertron modifying CSS

Question

Rendertron is loading my webpage, but it is prefacing the CSS file (bundled app.css via webpack) with the following PRE tag and HTML tags:

<html><head><base href="https://redacted-for-security.com/css"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@font-face{font-family:swiper-icons;font-style:normal;font </pre></body></html>

This obviously breaks the page layout for the render.

Does anyone know why it is doing this?

Many thanks

I believe its trying to show css used on the page, for a quick fix to hide pre-tag using body pre:first-child {display: none} or using appropriate css selectors. — Ganesh Vellanki, Aug 15 '22 at 18:18

score 0 · Answer 1 · answered Aug 15 '22 at 08:35

This is because of the <head>.

The CSS property page-break-after: avoid doesn't work in any WebKit or Mozilla based browsers, so you can alternatively use the page-break-inside: avoid over the heading and an acceptable amount of the text to prevent this page break:

CSS

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML

<div class="nobreak">
    <h3>Heading!</h3>
    
    <p>Some things:</p>
        
</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>

Relvant sources:

How do I avoid a page break immediately after a heading

I'm sorry I don't see how this is relevant to the question, could you please explain? — Joel, Aug 19 '22 at 14:13

Rendertron modifying CSS

1 Answers1

CSS

HTML