Image export display error

[Aerijo]

How it appears on the website

How it appears on the image created by Export .png

As seen in the screenshot, the course I experience this with is MATH2222. My others are fine, even ones with similar box sizes and contents. E.g., a side by side comparison of entries in the same exported image.

I guess this could be caused by html2canvas though, so I'm not sure if it can be fixed here.

[EMorf]

Interesting. Can you try refreshing the page, then exporting? I thought I fixed this issue but evidently not 😣

[Aerijo]

No luck. I closed the tab, cleared Cookies and other site data and Cached images and files in chrome, and then opened the google search result in a new tab. Making MATH2222 my only class, the exported PNG still overlapped onto the second line in each text box.

[EMorf]

Fair enough, thanks for this :) it has to be the html2canvas library then. I'll look into it this afternoon.

[EMorf]

@Aerijo It seems that other html2canvas users are having similar issues so it's a library thing. As a temporary fix, you can resize the window width so that the word "Tutorial" appears first on the second line, like this:

Then, exporting as a .png should work fine:

I'll raise an issue with the library dev, hopefully this'll get fixed soon.

[Aerijo]

Yes, doing so resolves the issue.

[phetw]

still facing this issue

[Aerijo]

@rappad Did resizing the window work as a temporary fix? The issue was closed here because it was caused by an external dependency.

[catmanjan]

Can we put a line break so the class type is always a line below?

…

On 22 Feb. 2018 7:24 pm, "Benjamin Gray" ***@***.***> wrote: @rappad <https://github.com/rappad> Did resizing the window work as a temporary fix? The issue was closed here because it was caused by an external dependency. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#214 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAIYhs8Mg8sGWHszXMix2JskL7ZNlZltks5tXSRNgaJpZM4SL3N5> .

[ngilmore14]

This issue can also be seen on the documentation page with the navigation word "configuration".

[porzellangott]

Hi,

I have similiar issues. It works fine with Google Chrome. It seems the text bounds are not calcuated correct with IE. Google Chrome supports range bounds and IE doesn't, so it uses wrapper, which is sometimes not correct:

var getWrapperBounds = function getWrapperBounds(node, scrollX, scrollY) {
    var wrapper = node.ownerDocument.createElement('html2canvaswrapper');
    wrapper.appendChild(node.cloneNode(true));
    var parentNode = node.parentNode;
    if (parentNode) {
        parentNode.replaceChild(wrapper, node);
        var bounds = (0, _Bounds.parseBounds)(wrapper, scrollX, scrollY);
        if (wrapper.firstChild) {
            parentNode.replaceChild(wrapper.firstChild, wrapper);
        }
        return bounds;
    }
    return new _Bounds.Bounds(0, 0, 0, 0);
};