Safari 13.1.2 temporarily freezing with Polymer web applications

halloweenman commented 4 years ago

Safari 13.1.2 temporarily freezes (for around 10 seconds) with Polymer web applications after a period of 1 minute user inactivity. The website resumes to normal operation after issue has occurred.

Only Safari experiences this issue.

The issue can be intermittent, you may need to try a few times to experience it.

No JS errors thrown.

Live Demo

https://safarifreeze-d8dab.web.app

Code (amended polymer-3-application) from polymer init:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>temp</title>
    <meta name="description" content="temp description">

    <!-- See https://goo.gl/OOhYW5 -->
    <link rel="manifest" href="/manifest.json">

    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <script type="module" src="/src/temp-app/temp-app.js" crossorigin></script>
  </head>
  <body>
    <temp-app></temp-app>
  </body>
</html>

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import { setPassiveTouchGestures } from '@polymer/polymer/lib/utils/settings.js';

import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';

setPassiveTouchGestures(true);

/**
 * @customElement
 * @polymer
 */
class TempApp extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>

      <paper-button>Click me 1st</paper-button>

      <paper-listbox>
        <paper-item>Click me 2nd</paper-item>
        <paper-item>Click me 3rd</paper-item>
      </paper-listbox>

      Click me 4th
    `;
  }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'temp-app'
      }
    };
  }
}

window.customElements.define('temp-app', TempApp);

I have also experienced this issue on other Polymer websites such as:

youtube.com material.io polymer-project.org

Steps to Reproduce

Using Safari 13.1.2 (OS = Catalina) visit https://safarifreeze-d8dab.web.app

Click on 'Click me 1st'
Click on 'Click me 2nd'
Click on 'Click me 3rd'
Click on 'Click me 4th'
Wait 1 minute - do nothing on device whilst waiting, go make a cup of tea!
Click on 'Click me 1st' again and you'll find website unresponsive for approx 10 seconds.

Expected Results

No pause/freezing.

Actual Results

Unresponsive website (approx 10 second pause)

Browsers Affected

[x] Safari 13.1.2 latest version (Catalina v10.15.6)

Versions

Polymer: v3.4.1
webcomponents: v2.4.4
Safari 13.1.2 OS
Catalina v10.15.6

halloweenman commented 4 years ago

This issue can also be replicated on youtube.com:

Visit youtube.com.
Click on the settings icon (looks like a more vertical icon) shown on the top right of the screen (just to the left of the sign in button).
Click on the white space to the left of the create (camera) icon to clear the drop down menu.
Wait 1 minute - do nothing on device whilst waiting, go make a cup of tea!
Click on the settings icon again and you'll find it unresponsive for approx 10 seconds.

See https://youtu.be/2nMPMZemLbU

justinfagnani commented 4 years ago

Is there a webkit bug filed for this yet?

halloweenman commented 4 years ago

Is there a webkit bug filed for this yet?

I haven't filed anything as I don't know if the issue is with Polymer/Safari/Webkit.

halloweenman commented 4 years ago

Closing as fixed with Safari Version 14.0.

Polymer / polymer