Fix safari problem

[MakinoharaShoko]

fix: #890

[cloudflare-workers-and-pages]

Deploying webgal-dev with    Cloudflare Pages

Latest commit:	fdc1572
Status:	✅  Deploy successful!
Preview URL:	https://7785c349.webgal-dev.pages.dev
Branch Preview URL:	https://fix-safari-problem.webgal-dev.pages.dev

View logs

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on improving the application's compatibility with iOS Safari, enhancing offline capabilities through service worker updates, and adding new animation and effect functionalities. The changes ensure a smoother user experience across different platforms and devices.

Highlights

• iOS Safari Fixes: This PR addresses issues in iOS Safari by adding specific styles and scripts to handle viewport scaling and touch events, ensuring a consistent user experience.
• Service Worker Improvements: The service worker is updated to cache critical game assets for offline use, improving loading times and reliability.
• Effect Updates: Added functionality to remove animations by target key and updated transform interface to include film-related effects.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a comprehensive set of changes to address rendering and interaction issues on Safari, particularly on iOS phones. The core of the fix involves a significant amount of new CSS and JavaScript in index.html to correctly handle the viewport, safe areas, scaling, and touch gestures. The service worker has also been completely rewritten, resulting in much cleaner and more robust caching logic. My review focuses on a couple of areas for code improvement: simplifying some redundant logic in index.html and improving the performance of a new function in PixiController.ts. Overall, the changes are well-implemented and should resolve the target issues.

I am having trouble creating individual review comments. Click here to see my feedback.

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts (307-311)

This while loop with repeated findIndex calls can be inefficient if there are many animations for the same target, as each findIndex call scans the array from the beginning. A more performant and idiomatic approach for removing multiple items from an array while it's being modified is to iterate backwards.

    for (let i = this.stageAnimations.length - 1; i >= 0; i--) {
      if (this.stageAnimations[i].targetKey === targetKey) {
        this.removeAnimationByIndex(i);
      }
    }

packages/webgal/index.html (470)

The isIOS detection logic here is redundant and uses an outdated detection method as a fallback. The main script block on this page already performs a more robust iOS detection and stores the result in window.__WEBGAL_DEVICE_INFO__. This script block, and the one at line 486, should rely solely on this pre-computed value for consistency and maintainability.

        const isIOS = window.__WEBGAL_DEVICE_INFO__?.isIOS;