Save snapshots looks quirky in Edge and Chrome

[tarjeieo]

Thank you for reporting an issue. We appreciate your feedback - to help the team understand your needs please complete the below template to ensure we have the details to help. Thanks!

Environment

[ X] SharePoint Online

[ ] SharePoint 2013

[ ] SharePoint 2016

Browser

[X] Chrome

[ ] Internet Explorer

[X] Edge

[ ] Safari

[ ] Other

Version

Please specify what version you are using: [ 2.6.7]

Summary

"Save snapshot" on the project status page looks very weird in Chrome and Edge. Finally looks OK in IE (WTF).

Expected / Desired Behavior / Question

Should looks decent in all browsers.

[tarjeieo]

Attempting to update https://github.com/niklasvh/html2canvas/releases

[Remi749]

Managed to fix some of it.

Left is the old, right is the new with the following changes done to the html2

let ppElement = document.getElementById("pp-projectstatus");
ppElement.style.fontFamily = '"Segoe UI","Segoe UI","Segoe",Tahoma,Helvetica,Arial,Roboto,"Helvetica Neue",sans-serif';
ppElement.style.fontFeatureSettings = "normal";
const canvas = await (window as any).html2canvas(ppElement);

it seems like when html2canvas is executed in Chrome/Edge it ignores a bunch of css properties (but IE is fine).

It probably has to do with html2canvas' way of traversing through the DOM in IE compared to Chrome/Edge as everything looks fine in IE.

Everything apart from the values and text coming from lists are still skipped somehow by html2canvas. So this is still a todo.

[Remi749]

Branch: https://github.com/Puzzlepart/prosjektportalen/tree/issues/727

I also fixed another problem while tinkering with this.

When a user scrolls down the ProjectStatus page and takes a snapshot, the snapshot taken is missing information and the floating navigation bar is placed on top of stuff.

I fixed this by adding a scrollToTop functionality, so that when the user presses the "snapshot" button the page is scrolled to the top before taking the snapshot.

[Remi749]

Fixed!

Tested in Chrome, Edge and IE, works perfectly across all.

The issue seems to be that the html2canvas loses css information such as font-family under export. Setting the font-family in the css manually solved this.

Fixed it through css changes instead of js by adding the correct font-family to the corresponding css files instead of overriding this in the export js code.

[olemp]

Solved by @Remi749 in #730

[Remi749]

Riskmatrix font issues are still present,

Solution: More css font-families must be set for the various projectstatus fields.