Error loading on safari after 3.0.2 upgrade

[deanmarcussen]

Describe the bug

After upgrading from 3.0.0 to 3.0.2 we are getting a loading error only on Safari (desktop and phone) Chrome desktop is fine, Chrome mobile also errors

The error reported is undefined is not an object evaluating viewport.areAllTileTreesLoaded

To Reproduce

Open iModel in Safari

Expected behavior Model opens. The only changes to the code is going from 3.0.0 to 3.0.2 (which fixed another issue)

Screenshots

Desktop (please complete the applicable information):

• OS: iOS/Mac
• Browser Safari
• Version [e.g. 22]
• iTwin.js Version [e.g. 3.0.2]

Additional context

startup code

    const viewConfiguration = useCallback((viewPort: ScreenViewport) => {
    const viewStyle: DisplayStyleSettingsProps = {
      // Transformed iModels are black by default, so we need to set the background color to white.
      backgroundColor: ColorDef.create("#FFFFFF").toJSON(),
      viewflags: {
        visEdges: false,
        shadows: true
      }
    }
    
    viewPort.overrideDisplayStyle(viewStyle);

    // default execute the fitview tool and use the iso standard view after tile trees are loaded
    const tileTreesLoaded = () => {
      return new Promise((resolve, reject) => {
        const start = new Date();
        const intvl = setInterval(() => {
          if (viewPort.areAllTileTreesLoaded) {
            clearInterval(intvl);
            resolve(true);
          }
          const now = new Date();
          // after 20 seconds, stop waiting and fit the view
          if (now.getTime() - start.getTime() > 20000) {
            reject();
          }
        }, 100);
      });
    };

    tileTreesLoaded()
      .finally(() => {
        void IModelApp.tools.run(FitViewTool.toolId, viewPort, true, false);
        viewPort.view.setStandardRotation(StandardViewId.Iso);
        setIsLoaded(true);

      });
  }, []);

  const viewCreatorOptions = useMemo(
    () => ({ viewportConfigurer: viewConfiguration }),
    [viewConfiguration]
  );

package.json snippet

    "@bentley/icons-generic": "^1.0.34",
    "@bentley/react-scripts": "^4.0.7",
    "@itwin/appui-abstract": "^3.0.2",
    "@itwin/appui-layout-react": "^3.0.2",
    "@itwin/appui-react": "^3.0.2",
    "@itwin/browser-authorization": "^0.5.1",
    "@itwin/components-react": "^3.0.2",
    "@itwin/core-bentley": "^3.0.2",
    "@itwin/core-common": "^3.0.2",
    "@itwin/core-frontend": "^3.0.2",
    "@itwin/core-geometry": "^3.0.2",
    "@itwin/core-i18n": "^3.0.2",
    "@itwin/core-markup": "^3.0.2",
    "@itwin/core-orbitgt": "^3.0.2",
    "@itwin/core-quantity": "^3.0.2",
    "@itwin/core-react": "^3.0.2",
    "@itwin/core-telemetry": "^3.0.2",
    "@itwin/imodel-components-react": "^3.0.2",
    "@itwin/imodels-access-frontend": "^1.0.1",
    "@itwin/imodels-client-management": "^1.0.1",
    "@itwin/itwinui-react": "^1.33.1",
    "@itwin/presentation-common": "^3.0.2",
    "@itwin/presentation-frontend": "^3.0.2",
    "@itwin/reality-data-client": "^0.7.2",
    "@itwin/web-viewer-react": "^2.0.9",
    "@itwin/webgl-compatibility": "^3.0.2"

[aruniverse]

Hi @deanmarcussen , can you try 3.1.0, and if the issue still persists, let us know

[deanmarcussen]

@aruniverse no change on 3.1.2

[aruniverse]

I just tested this out locally and it worked fine for me on safari.

Looks like the only change you made in the viewConfiguration is:

    const viewStyle: DisplayStyleSettingsProps = {
      // Transformed iModels are black by default, so we need to set the background color to white.
      backgroundColor: ColorDef.create("#FFFFFF").toJSON(),
      viewflags: {
        visEdges: false,
        shadows: true
      }
    }
    viewPort.overrideDisplayStyle(viewStyle);

I don't see anything glaringly wrong about that. @pmconne do you see anything that looks off?

Somehow the viewport is being undefined in the tileTreesLoaded callback. I think you could easily get around this by adding an optional chain in the if statement ie if (viewPort?.areAllTileTreesLoaded), but that should be unnecessary. Are you doing anything else to your viewport thats causing it to potentially be undefined?

Heres a sandbox showing that it worked fine for me: https://www.itwinjs.org/sandboxes/ArunGeorge/GH%20Issue%203415

[calebmshafer]

@deanmarcussen did @aruniverse's suggestion help with fixing the issue?

[deanmarcussen]

It's a dificult one for me to test, as I don't have a mac locally, so I have not been able to debug it.

We think the issue maybe related to the specific model, as it worked yesterday on a different site, with a different model (a much smaller model), for the user that has the issue.

I will do some experimentation with that user, and some different models.

[aruniverse]

@deanmarcussen Any update? Will close this issue to due to inactivity if there's no response in a week. We can always reopen afterwards.

[deanmarcussen]

@aruniverse I think we see it on and off depending on the iModel/ particular version we've deployed with.

@jptissot Did your last fix, fix it after it broke, after the fix before that?

[jptissot]

Well, the iModel now displays after I added the optional chain in the if statements. However, we are also using the viewport in other places in the code, namely in a widget.

For example:

  const viewport = useActiveViewport()!;

  useEffect(() => {
   ...
    if (viewport?.areAllTileTreesLoaded) {
   ...
    }
  }, [viewport]);

This works fine in Chrome, Firefox and Edge but in Safari, the if never evaluates to true.

[deanmarcussen]

@aruniverse it does seem to vary depending on the model we use.

Is it possible to load one of our models on your sandbox? How would we go about doing that?

[aruniverse]

@deanmarcussen it's a tad complicated to do that at the moment.

Could you try opening your troublesome imodel in my test app and see if you still have the same issues?

[aruniverse]

Closing this issue due to inactivity; can reopen later if issue still exists