The report header and footer not shown properly on opera mobile.

[jurek2006]

On Opera Mobile - the header and footer on the report preview occupies only part of available width (like only one column).

[jurek2006]

Problem looks like so:

After further investigation I found that paragraphs (as elements) occupy full width (of the page), only paragraphs' texts behave weirdly (below paragraphs with background color):

Generated pdf is not affected. But turning it visible (on preview page) shows that there is the same behavior in the element (which is base for generating pdf).

After investigating it deeper - looks like behavior is connected with setting the element's width, height & font size, and scaling it for preview (it doesn't occur on mobiles Chrome, Firefox, UC Browser, nor on desktop browsers):

.preview {
  /* scale down to get PDF preview */
  margin: 1rem;
  transform-origin: top left;
  transform: scale(0.1);
  position: absolute;
  background-color: #ffffff;

  box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 15px 5px,
    rgba(0, 0, 0, 0.12) 0px 0px 2px;
}

#contentToConvert {
  /* content is scaled up to get good print resolution
    html2canvas renders only 72DPI
    forced to have A4 page ratio
  */
  width: 2480px;
  height: 3508px;
  font-size: 45px;
  padding: 200px; /* PDF page margin */
  font-family: Arial, Helvetica, sans-serif; /* use safe font to render similar PDF */
}

No idea at the moment, how to fix it.