Merge pull request #5993 from plotly/firefox82-overflow-visible

Temporary fix to help improve rendering of graphs with Mathjax on Firefox v82 and higher

Author: archmoj

.circleci/config.yml

@@ -163,6 +163,43 @@ jobs:
           name: Test MathJax on firefox-81
           command: .circleci/test.sh mathjax-firefox
 
+  mathjax-firefox82:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.8.0-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          firefox-version: '82.0'
+          install-chrome: false
+          install-chromedriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test MathJax on firefox-82
+          command: .circleci/test.sh mathjax-firefox82+
+
+  mathjax-firefoxLatest:
+    docker:
+      # need '-browsers' version to test in real (xvfb-wrapped) browsers
+      - image: cimg/node:16.8.0-browsers
+    environment:
+      # Alaska time (arbitrary timezone to test date logic)
+      TZ: "America/Anchorage"
+    working_directory: ~/plotly.js
+    steps:
+      - browser-tools/install-browser-tools: &browser-versions
+          install-chrome: false
+          install-chromedriver: false
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test MathJax on firefox-latest
+          command: .circleci/test.sh mathjax-firefox82+
+
   make-baselines:
     parallelism: 4
     docker:
@@ -343,6 +380,12 @@ workflows:
       - mathjax-firefox81:
           requires:
             - install-and-cibuild
+      - mathjax-firefox82:
+          requires:
+            - install-and-cibuild
+      - mathjax-firefoxLatest:
+          requires:
+            - install-and-cibuild
       - no-gl-jasmine:
           requires:
             - install-and-cibuild

.circleci/test.sh

@@ -74,6 +74,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    mathjax-firefox82+)
+        ./node_modules/karma/bin/karma start test/jasmine/karma.conf.js --FF --skip-tags=noFF82 --bundleTest=mathjax --nowatch || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     make-baselines)
         SUITE=$(find $ROOT/test/image/mocks/ -type f -printf "%f\n" | sed 's/\.json$//1' | circleci tests split)
         python3 test/image/make_baseline.py $SUITE || EXIT_STATE=$?

draftlogs/5993_fix.md

@@ -0,0 +1 @@
+ - Temporary fix to improve rendering of graphs with Mathjax on Firefox v82 and higher [[#5993](https://github.com/plotly/plotly.js/pull/5993)]

src/lib/svg_text_utils.js

@@ -94,9 +94,12 @@ exports.convertToTspans = function(_context, gd, _callback) {
                                                newSvg.node().firstChild);
                 }
 
+                var w0 = _svgBBox.width;
+                var h0 = _svgBBox.height;
+
                 newSvg.attr({
                     'class': svgClass,
-                    height: _svgBBox.height,
+                    height: h0,
                     preserveAspectRatio: 'xMinYMin meet'
                 })
                 .style({overflow: 'visible', 'pointer-events': 'none'});
@@ -105,9 +108,18 @@ exports.convertToTspans = function(_context, gd, _callback) {
                 var g = newSvg.select('g');
                 g.attr({fill: fill, stroke: fill});
 
-                var gBB = g.node().getBoundingClientRect();
-                var newSvgW = gBB.width;
-                var newSvgH = gBB.height;
+                var bb = g.node().getBoundingClientRect();
+                var w = bb.width;
+                var h = bb.height;
+
+                if(w > w0 || h > h0) {
+                    // this happen in firefox v82+ | see https://bugzilla.mozilla.org/show_bug.cgi?id=1709251 addressed
+                    // temporary fix:
+                    newSvg.style('overflow', 'hidden');
+                    bb = newSvg.node().getBoundingClientRect();
+                    w = bb.width;
+                    h = bb.height;
+                }
 
                 var x = +_context.attr('x');
                 var y = +_context.attr('y');
@@ -119,21 +131,21 @@ exports.convertToTspans = function(_context, gd, _callback) {
                 if(svgClass[0] === 'y') {
                     mathjaxGroup.attr({
                         transform: 'rotate(' + [-90, x, y] +
-                        ')' + strTranslate(-newSvgW / 2, dy - newSvgH / 2)
+                        ')' + strTranslate(-w / 2, dy - h / 2)
                     });
                 } else if(svgClass[0] === 'l') {
-                    y = dy - newSvgH / 2;
+                    y = dy - h / 2;
                 } else if(svgClass[0] === 'a' && svgClass.indexOf('atitle') !== 0) {
                     x = 0;
                     y = dy;
                 } else {
                     var anchor = _context.attr('text-anchor');
 
-                    x = x - newSvgW * (
+                    x = x - w * (
                         anchor === 'middle' ? 0.5 :
                         anchor === 'end' ? 1 : 0
                     );
-                    y = y + dy - newSvgH / 2;
+                    y = y + dy - h / 2;
                 }
 
                 newSvg.attr({

tasks/test_syntax.js

@@ -31,7 +31,7 @@ assertCircularDeps();
 // check for for focus and exclude jasmine blocks
 function assertJasmineSuites() {
     var BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit'];
-    var TAGS = ['noCI', 'noCIdep', 'gl', 'flaky'];
+    var TAGS = ['noCI', 'noCIdep', 'noFF82', 'gl', 'flaky'];
     var IT_ONLY_TAGS = ['gl', 'flaky'];
     var logs = [];
 

test/jasmine/bundle_tests/mathjax_test.js

@@ -98,7 +98,7 @@ describe('Test MathJax:', function() {
             .then(done, done.fail);
         });
 
-        it('should scoot x-axis title (with MathJax) below x-axis ticks', function(done) {
+        it('@noFF82 should scoot x-axis title (with MathJax) below x-axis ticks', function(done) {
             expect(window.MathJax).toBeDefined();
 
             testTitleScoot({