Fix SVG element while scrolling vertically, issues with Firefox

Question

When trying to vertically fix an SVG item inside a scrollable div, setting its y coordinate to the scrollTop property, like in the following example:

var container = document.getElementById('container');
var fixedText = document.getElementById('fixed-text');
fixedText.setAttribute('y', container.scrollTop + 50);
 container.addEventListener('scroll', function() {
   fixedText.setAttribute('y', container.scrollTop + 50);
 });

    div {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      margin: auto;
      overflow: auto;
    }
    svg {
      width: 400px; 
      height: 2000px;
    }
    text {
      text-anchor: middle;
    }

  <div id="container">
    <svg>
      <text id="fixed-text" x="200" y="50">Fixed text vertically, but not horizontally</text>
    </svg>
  </div>

JSFiddle: https://jsfiddle.net/fr4top2g/10/

The SVG item is correctly fixed in Chrome, but I am having issues with Firefox, where the item seems to be positioned before the view box inside the div is updated, causing it to oscillate on the screen, instead of being fixed as expected. (This is particularly visible when scrolling with the mouse wheel).

Would you have any clue for a simple solution to this problem, which might be caused by a different scroll handling in Chrome and Firefox?

Note 1: since the item might be too wide to fit in the div, it also has to be horizontally scrollable, which means it would be simpler if the solution didn't involve putting the SVG item out of its container scrollable div.

Note 2: note that if we open the web console in Firefox, click on the SVG item, and then vertically scroll with the mouse wheel, the issue seems to be solved for some reason.

Note 3: I am already using D3.js in this project, so any solution involving it would not bother me. I am not currently using JQuery, even though it would be possible if I had to.

Note 4: the same issue arises in the solution provided to this topic: Fixing an element on Y axis, but scrolling with page on x axis?

Thank you in advance for any help.

Vincent · Accepted Answer · 2018-07-03T09:43:31.617

Firefox scroll management is done asynchronously with the DOM elements update, as stated in this page: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

I finally managed to fix the SVG item, using no Javascript but some CSS, along with an SVG foreign object:

    #container {
      border: 1px solid black;
      width: 300px;
      height: 300px;
      margin: auto;
      overflow: auto;
    }
    svg#outer-svg {
      width: 400px;
      height: 2000px;
    }
    text {
      text-anchor: middle;
    }
    #inner-svg {
      position: sticky;
      top: 70px;
      width: 400px;
      height: 50px;
    }

    <div id="container">
      <svg id="outer-svg">
        <foreignObject id="foreign-object" width="100%" height="100%">
          <body xmlns="http://www.w3.org/1999/xhtml">
            <svg id="inner-svg">
              <text x="200" y="30">Fixed text vertically, but not horizontally</text>
            </svg>
          </body>
        </foreignObject>
      </svg>
    </div>

Fix SVG element while scrolling vertically, issues with Firefox

1 Answers1