Skip to content

Apps that dynamically calculate height are broken, during app.activated core event document.body.clientHeight/scrollHeight is 0 #164

@1951FDG

Description

@1951FDG

Problem

Apps dynamically calculating their height during app.activated core event, are not able to resize correctly due to 0 height being returned. I believe this has been an issue since about 1 month ago.

This issue can be reproduced while switching tabs back and forth in Zendesk.

Whenever this happens a workaround is to refresh the apps, which will fire app.registered core event again.

Some of the apps affected are:

image

Example code to debug

/**
 * Event Listener that fires when the app becomes active. Resizes the app's iframe dimensions.
 */
client.on('app.activated', (event) => {
  client.invoke('resize', { height: `${document.body.clientHeight}px` }).then((data) => {
    console.error(`body client height: ${document.body.clientHeight}`);
    console.error(`body scroll height: ${document.body.scrollHeight}`);
    console.error(`html client height: ${document.documentElement.clientHeight}`);
    console.error(`html scroll height: ${document.documentElement.scrollHeight}`);
    console.error(`${getComputedStyle(document.documentElement).getPropertyValue('height')}`);
  });
});

Environment

Google Chrome - Version 100.0.4896.127

Additional info:

core_api/#resize

Note: Ensure that you always invoke a resize whenever the app.activated core event is fired if your app is dynamically calculating it's height. This is considered as a best practice to prevent a resizing issue where the body scrollHeight of the iframe would return a value of 0 whenever an agent switches to another ticket tab, while your app in the original tab was still in the process of being loaded.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions