SVG rendering issue in Chrome
dtra opened this issue · 5 comments
On Chrome Version 84.0.4147.125 (Official Build) (64-bit) on Windows 10 and Mac OS X 10.15.6, I'm seeing an issue with the svg output from the tex2svg demo here. The issue with the plus sign can occur in different positions in the equation.
I also just note that this output does not contain a title element, which I noted that the output of mathjax-node does include.
Output generated by:
node -r esm tex2svg 37+20+8
Does the generated svg also require generated css? I've pasted the svg below:
<svg style="vertical-align: -0.186ex" xmlns="http://www.w3.org/2000/svg" width="11.188ex" height="1.715ex" role="img" focusable="false" viewBox="0 -676 4944.9 758" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="MJX-1-TEX-N-33" d="M127 463Q100 463 85 480T69 524Q69 579 117 622T233 665Q268 665 277 664Q351 652 390 611T430 522Q430 470 396 421T302 350L299 348Q299 347 308 345T337 336T375 315Q457 262 457 175Q457 96 395 37T238 -22Q158 -22 100 21T42 130Q42 158 60 175T105 193Q133 193 151 175T169 130Q169 119 166 110T159 94T148 82T136 74T126 70T118 67L114 66Q165 21 238 21Q293 21 321 74Q338 107 338 175V195Q338 290 274 322Q259 328 213 329L171 330L168 332Q166 335 166 348Q166 366 174 366Q202 366 232 371Q266 376 294 413T322 525V533Q322 590 287 612Q265 626 240 626Q208 626 181 615T143 592T132 580H135Q138 579 143 578T153 573T165 566T175 555T183 540T186 520Q186 498 172 481T127 463Z"></path><path id="MJX-1-TEX-N-37" d="M55 458Q56 460 72 567L88 674Q88 676 108 676H128V672Q128 662 143 655T195 646T364 644H485V605L417 512Q408 500 387 472T360 435T339 403T319 367T305 330T292 284T284 230T278 162T275 80Q275 66 275 52T274 28V19Q270 2 255 -10T221 -22Q210 -22 200 -19T179 0T168 40Q168 198 265 368Q285 400 349 489L395 552H302Q128 552 119 546Q113 543 108 522T98 479L95 458V455H55V458Z"></path><path id="MJX-1-TEX-N-2B" d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z"></path><path id="MJX-1-TEX-N-32" d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z"></path><path id="MJX-1-TEX-N-30" d="M96 585Q152 666 249 666Q297 666 345 640T423 548Q460 465 460 320Q460 165 417 83Q397 41 362 16T301 -15T250 -22Q224 -22 198 -16T137 16T82 83Q39 165 39 320Q39 494 96 585ZM321 597Q291 629 250 629Q208 629 178 597Q153 571 145 525T137 333Q137 175 145 125T181 46Q209 16 250 16Q290 16 318 46Q347 76 354 130T362 333Q362 478 354 524T321 597Z"></path><path id="MJX-1-TEX-N-38" d="M70 417T70 494T124 618T248 666Q319 666 374 624T429 515Q429 485 418 459T392 417T361 389T335 371T324 363L338 354Q352 344 366 334T382 323Q457 264 457 174Q457 95 399 37T249 -22Q159 -22 101 29T43 155Q43 263 172 335L154 348Q133 361 127 368Q70 417 70 494ZM286 386L292 390Q298 394 301 396T311 403T323 413T334 425T345 438T355 454T364 471T369 491T371 513Q371 556 342 586T275 624Q268 625 242 625Q201 625 165 599T128 534Q128 511 141 492T167 463T217 431Q224 426 228 424L286 386ZM250 21Q308 21 350 55T392 137Q392 154 387 169T375 194T353 216T330 234T301 253T274 270Q260 279 244 289T218 306L210 311Q204 311 181 294T133 239T107 157Q107 98 150 60T250 21Z"></path></defs><g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)"><g data-mml-node="math"><g data-mml-node="mn"><use xlink:href="#MJX-1-TEX-N-33"></use><use xlink:href="#MJX-1-TEX-N-37" transform="translate(500, 0)"></use></g><g data-mml-node="mo" transform="translate(1222.2, 0)"><use xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="mn" transform="translate(2222.4, 0)"><use xlink:href="#MJX-1-TEX-N-32"></use><use xlink:href="#MJX-1-TEX-N-30" transform="translate(500, 0)"></use></g><g data-mml-node="mo" transform="translate(3444.7, 0)"><use xlink:href="#MJX-1-TEX-N-2B"></use></g><g data-mml-node="mn" transform="translate(4444.9, 0)"><use xlink:href="#MJX-1-TEX-N-38"></use></g></g></g></svg>
I am not able to reproduce the output that you have shown (in Windows 10 or Mac OS X 10.14). Can you use CommonHTML output instead?
Sorry, when you say that you cannot reproduce, do you mean that opening the SVG that I have embedded in chrome does not display the same? Or that running the node command does not produce the same SVG?
Regarding the use of CHTML, it is probably our preferred option, it was simpler to retrieve a standalone SVG file than retrieve CSS+HTML. Would you be able to tell me if we generate multiple equations on one page (not using the page method), will the CSS ever conflict?
when you say that you cannot reproduce, do you mean that opening the SVG that I have embedded in chrome does not display the same?
Correct.
if we generate multiple equations on one page (not using the page method), will the CSS ever conflict?
No, but if you process several expressions before generating the CSS, the CSS will be the union of the rules needed for all the expressions processed.
I was a little bored so I decided to chime in a bit. I was actually able to reproduce the issue with the SVG provided above with Google Chrome 83.0.4103.97 on Windows 10. However, this might be an issue with Chromium and not MathJax, as FireFox renders it fine while the Chromium-based Microsoft Edge suffers from the same problem.
The problem also seems to be dependent on the zoom level, it only happens at 100%. Maybe some pixel issue?
I was a little bored so I decided to chime in a bit. I was actually able to reproduce the issue with the SVG provided above with Google Chrome 83.0.4103.97 on Windows 10. However, this might be an issue with Chromium and not MathJax, as FireFox renders it fine while the Chromium-based Microsoft Edge suffers from the same problem.
Thanks for finding this, I can at least report this issue to my senior.