actully i have created a react app it works well on my old phone all scrolltrigger animations smooth scroll and other framer motion animation works correct with a 2% of lag it works well on my pc and laptop also no crashing but the problem is when i tried to use it on 120HZ display mobile after 10 seconds of scroll all svgs of my website crashing means svg crossing layouts it looks double and triple i am using svg preserve aspect none but i dont tjink it will create problem not all svgs are crashing only fews are crashing what to do
Rendering issues on a device with a 120Hz display that don't appear devices with lower refresh rates or on other platforms could be related a few different factors. Here's a plan to diagnose and potentially solve the problem:
Performance Profile: Use the performance profiling tools available in browsers like Chrome or Firefox, or React DevTools, to see if are any performance bottlenecks in your application.
Hardware Acceleration: High refresh-rate displays can sometimes bring issues to light that weren't apparent on lower refresh-rate screens, such as a lack of hardware acceleration. Check if enabling hardware acceleration for your SVGs improves the. You can apply a CSS rule like transform: translateZ0) to the element to hint at the browser to use GPU acceleration.
**Optimize SVG It's possible that the SVGs themselves are not optimized and causing performance issues, which become more visible on high-refresh displays. Use a tool like SVGO to optimize SVG files.
React and Libraries: Ensure that you're using the latest versions of React and any libraries you are using. Updates often contain performance improvements and bug fixes which may resolve the issues on newer devices.
SVG Rendering: If are using a library like react-native-svg for handling SVGs, sure it is up-to-date and that there are no known issues with high-refresh rate displays.
Preserve Aspect Ratio: While preserveAspectRatio="none" is the direct cause of the problem, rendering issues could occur if the aspect ratio of your SVGs changes as you scroll.
Event Handling: Check how scroll events are being handled. It might be that continuous rerendering on scroll is causing problems. Debouncing scroll events or using requestAnimationFrame might ease the performance issues.
ScrollTrigger and Framer Motion: If you're using third-party libraries like Framer Motion and GSAP's ScrollTrigger, check for compatibility issues with high refresh-rate displays and look up if there any recommended settings that can help you optimize for such displays.
Test Across Devices: Test the app on various devices similar specs to see if the issue is isolated to one device consistent across all with a 120Hz display.
Check SVG Attributes: Look for any specific attributes in your SVG that may contribute to the issue (like large viewboxes or excessive details) and simplify them if possible.
CSS Overlap Bug: Check your CSS to ensure there are no issues causing overlapping or duplicating visuals. It could be a z-index issue or CSS layering problem.
Web Technologies: Verify no outdated web technologies are used that might not be fully compatible with high refresh-rate screens. Consider the use of modern layout techniques like CSS Grid or Flexbox if not already implemented.
Debugging Tools: Use the Chrome DevTools or Safari’s Web Inspector to inspect the problematic SVG elements they begin to "crash" and see if any properties are changing, or if any errors are thrown in the console.
If you're still experiencing issues after following these steps, consider seeking help from community forums or the libraries' maintainers directly, providing them with detailed information the issue and steps to reproduce.
stackoverflow.com
lightrun.com
lightrun.com