Entering a correct word bricks Safari

[Thesnake66six]

Entering a correct guess seems to brick safari; the guess registers but safari crashes entirely

[thesilican]

Are you using Safari on iOS, iPadOS, or macOS? What Safari version are you using?

[Thesnake66six]

iOS 15.4, not sure about safari version but the latest for that iOS version.

Also, I just tried again, and it didn’t kill safari, but made it unresponsive for about 25-30 seconds. I screen recorded it but am not sure how to attach it using the web version of GitHub

[bobpaul]

I think you can just drag/drop files into the comment box

[thesilican]

Do you get the same behavior if you use Chrome? Also, which model iPhone are you using?

[DanReyLop]

Also, I just tried again, and it didn’t kill safari, but made it unresponsive for about 25-30 seconds.

I'm using a 2019 16" Macbook Pro (latest Monterrey and Safari versions), and I also noticed that the page becomes unresponsive when I type a correct word. In my case, it's just for about 1 second, but it's definitely noticeable. It doesn't bother me but it may make debugging easier than if it only happened on iPhones :)

[Thesnake66six]

Hi! I’ve just given it another go and the length of freeze seems to improve based on the number of solved boards - Solving 10 boards makes it a lot shorter

[thesilican]

My suspicion is that this isn't a Safari specific issue, it's that the app itself is somewhat performance intensive to begin with, and Safari just has a slower renderer. I will investigate when there is time

[bexelbie]

If it’s useful, on iOS 15.4.1 running on an iPhone 13 Pro the delay is several seconds (<4) and reduces as the solved woot count increases. IIRC, there is almost no delay in airplane mode.

[krevis]

The bug depends on the "Hide completed boards" and "Fade out" settings.

With "Hide completed boards" turned on, and "Fade out" turned off, there's no bug, the response is instantaneous. With other combinations, it's slow.

Here's the Safari profiler showing a multi-second pause with "Hide completed boards" turned off. It's all attributed to a CSS transition on the filter property of div.board.complete.

Sure enough, each completed board has an animated transition to put the dimming filter on it:

.game:not(.game.hide-completed-boards) .board.complete {
  filter: contrast(0.5) brightness(0.5);
  transition: filter 150ms ease-out;
}

I'll try tinkering with that.

(I'm guessing there is a more efficient way to get the dimming effect than applying contrast and brightness filters; a simple gray translucent overlay would likely be effective enough. I'm also seeing a lot of dark visual glitches around completed boards, when scrolling around on iPhone or iPad, and I'm suspicious that these filters are the cause.)

[krevis]

FWIW, just taking out the transition is enough to fix it. The filter by itself seems to be OK.

With the transition: replacing the filter with opacity 0.1 still has the bug, but setting background-color does not (it animates immediately and smoothly). Mysterious.