hiding offcanvas fails in Firefox 79.0 and in some cases with Firefox 80.0.1

[raffaelj]

Since my last Firefox update the json inspector doesn't hide correctly anymore. The latest release for OpenSUSE Tumbleweed is 79.0 (64-bit). I also tested a Firefox Portable 79.0 on a Windows 7 machine and it has the same issue.

Firefox 80.0.1 (64-bit) on Windows works fine with an existing cockpit 0.10.2 installation (next - not sure, which commit), but it also fails with the latest next branch.

Chromium on OpenSUSE seems to work correctly.

Steps to reproduce:

• open an entry in a collection (or create a new one and save it once)
• click on the "JSON" button and the inspector fades in from the right
• try to close it with escape key, with clicking on close icon or with clicking on the white, transparent area left to it

The inspector fades out, but the whole display is covered with a white, transparent div, the offcanvas panel. The panel keeps it's uk-active class and the body keeps the uk-offcanvas-page class.

So I digged it down and for some reason the event webkitTransitionEnd doesn't fire. This might be a browser related issue, but it effects Cockpit.

If I change UIkit2.support.transition.end = 'transitionend';, than the event transitionend properly fires and the finalize function of the offcanvas does it's job.

See also: https://github.com/agentejo/cockpit/blob/next/assets/lib/uikit/js/core/core.js#L80-L88 https://github.com/agentejo/cockpit/blob/next/assets/lib/uikit/js/core/offcanvas.js#L80-L81

But I don't understand, why the uikit v2 demo works, with FF79 on Linux, with FF79 on Win7 and with FF80 on Win7, since it should use the same uikit version as Cockpit. Maybe the jQuery version is different. Or it interacts with riot...

And I wrote a hotfix, but this is an ugly hack for config/boostrap.php

// hotfix for webkitTransitionEnd event of offcanvas in Firefox 79.0 and 80.0, tested with
// * FF 79.0 (64-bit) on OpenSuse Tumbleweed, 2020-09-03
// * FF 79.0 (64-bit) on Windows 7
// * FF 80.0.1 (64-bit) on Windows 7
$app->on('admin.init', function() {
    $this->on('app.layout.header', function() {
        echo '<script>if (navigator && navigator.userAgent && navigator.userAgent.match(/^Mozilla.*(79|80)\.0/)) UIkit2.support.transition.end = "transitionend";</script>';
    });
});

[aheinze]

Thanks for the hint, I'll try to re-create the issue

[TulioAbreu]

I don't know if the problem is related, but when opening component modals recursively and try to close them by clicking on background you cannot scroll the page.

[raffaelj]

Update: Now I have Firefox 80.0 (64bit) on OpenSUSE Tumbleweed and after turning off my hotfix, I have the same issue with the current next branch.

[raffaelj]

@TulioAbreu This dosn't seem to be related. It also happens in Chromium 85.0.4183.83 (openSUSE Build) (64-bit) with and without my hotfix (image component, click on "edit meta data" and close with clicking on empty side area). Could you open a separate issue?

[TulioAbreu]

@raffaelj thank you! 😄 I'm going to create a new issue.

[aheinze]

@raffaelj I can't re-produce your issue. But I will refactor the transitionend guessing, so it wins over the prefixed ones if supported.

[raffaelj]

I tested it now with

• FF79 on Win7
• FF80 on OpenSUSE and Win7 and it worked.

Thanks for the fix.