Wijmo Build 5.20211.794 is Now Available

This build is an urgent hotfix for a critical rendering bug in Safari 14.1. It's identical to the previous release (5.20211.792), but adds a fix (hack) for working around the Safari rendering bug.

Update to build 5.2011.794 to solve this problem automatically.

Keep reading to learn more about the issue and how to patch it yourself.

FlexGrid Scroll Issue in Safari 14.1 Explained

When the viewport of the FlexGrid is scrolled in Safari 14.1, eventually the grid cells disappear. This is a bug in Safari rendering logic and is being fixed by the webkit team ASAP.

By inspecting the DOM, we can see that the cells are still in the DOM with proper visibility, layout, and positioning. Safari is simply not rendering them at all.

The Safari 14.1 Fix (Hack)

Since the DOM representing the cells was configured properly, it was assumed the rendering engine was simply not rendering. The reason modern browsers are so fast is that they attempt to render the page in a smart way (instead of rendering everything). This happened to be an instance where the rendering logic was a bit too smart for its own good.

The simple solution was to trick Safari into rendering the region of the DataGrid with cells in it after scrolling. There are many ways to force a render, but it was important that we did not visually impact the cells. It usually requires a visual change to force a region to render (or re-render).

The solution is a "fake" transform. We apply a CSS transform to the FlexGrid root element that does not visually change the cells as all, but Safari re-renders because the transform is applied.

Here is the fix:

if (wjcCore.isSafari()) {
  grid.updatedView.addHandler(function(s, e) {
    //removes previous transform
    grid._root.style.transform = '';
    //this is the "fake" transform that forces Safari to repaint the grid area
    grid._root.style.transform = 'translateZ(0)';
  });
}

You can use this patch if you don't want to upgrade Wijmo versions.

Issue Repro and Fix Sample

Here is sample on StackBlitz to demonstrate the issue and the fix:

Try it yourself.

The team apoplogizes if this caused any issue for users. We wish we didn't have to make hacks like this, but browsers, as you all must know, are weird!