-
Notifications
You must be signed in to change notification settings - Fork 4.9k
-
equation-chromium
vs
equation-firefox
The error on Firefox is:
#1 0ms Starting document clone with size 1920x955 scrolled to 0,0 html2canvas.min.js:20:191994
#1 162ms Unable to access cssRules property DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
createStyleClone https://www.pangram-world.com/scripts/html2canvas.min.js:20
createElementClone https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
appendChildNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneChildNodes https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
appendChildNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneChildNodes https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
fn https://www.pangram-world.com/scripts/html2canvas.min.js:20
Js https://www.pangram-world.com/scripts/html2canvas.min.js:20
e https://www.pangram-world.com/scripts/html2canvas.min.js:20
e https://www.pangram-world.com/scripts/html2canvas.min.js:20
a https://www.pangram-world.com/scripts/html2canvas.min.js:20
a https://www.pangram-world.com/scripts/html2canvas.min.js:20
Js https://www.pangram-world.com/scripts/html2canvas.min.js:20
<anonymous> https://www.pangram-world.com/scripts/html2canvas.min.js:20
convertToImage https://www.pangram-world.com/scripts/symbolsLatex.js:82
renderEquation https://www.pangram-world.com/scripts/symbolsLatex.js:37
html2canvas.min.js:20:192835
#1 393ms Document cloned, element located at -9999,675.2999877929688 with size 169.43333435058594x35.01666259765625 using computed rendering html2canvas.min.js:20:191994
#1 393ms Starting DOM parsing html2canvas.min.js:20:191994
#1 428ms Starting renderer for element at -9999,675.2999877929688 with size 170x36 html2canvas.min.js:20:191994
#1 430ms Canvas renderer initialized (170x36) with scale 1 html2canvas.min.js:20:191994
#1 449ms Finished rendering html2canvas.min.js:20:191994
Source map error: Error: request failed with status 404
Resource URL: https://www.pangram-world.com/style/bootstrap.css
Source Map URL: bootstrap.css.map```
I'm using this HTML <head>
```<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.css">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/cards.css">
<link rel="stylesheet" href="style/symbols.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- ... favicon ... -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="images/android-chrome-512x512.png">
<script src="scripts/main.js" defer></script>
<script src="scripts/bootstrap.bundle.js"></script>
<script src="https://kit.fontawesome.com/18fe617275.js" crossorigin="anonymous"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="scripts/html2canvas.min.js"></script>
And this is the script (at least part of it) that html2canvas is linked:
function convertToImage() {
const mathContainer = document.getElementById('mathContainer');
// Temporarily position the mathContainer off-screen
mathContainer.style.position = 'absolute';
mathContainer.style.left = '-9999px';
mathContainer.style.visibility = 'visible';
// Render the image with html2canvas
html2canvas(mathContainer, {
backgroundColor: background === 'transparent' ? 'rgba(0,0,0,0)' : 'white',
}).then(canvas => {
// Now that the image is rendered, reset the mathContainer's style
mathContainer.style.position = '';
mathContainer.style.left = '';
mathContainer.style.visibility = 'hidden';
// Set the source of the result image and display it
const resultImage = document.getElementById('resultImage');
resultImage.src = canvas.toDataURL('image/png');
resultImage.style.display = 'block'; // Show the image
resultImage.style.margin = 'auto'; // Center the image if needed
// Create the download link
createDownloadLink(canvas.toDataURL('image/png'));
// Create and display the copy button
createCopyButton(canvas.toDataURL('image/png'));
});
}
But I can not seem to work out what the difference is between Chromium and Firefox. I tried two Firefox browsers with the same issue. I have a live site working of it here: https://www.pangram-world.com/latex.html
You can just copy and paste any LaTeX equation in: F_{d} = 6\pi\eta rv
You can try between Chromium and Firefox to see the rendered difference. I really want to solve this!
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment