Issue rendering animated SVG
This has perplexed me for over a year at this point. The only page I have run into this issue on is https://create-react-app.dev/docs/getting-started and the animated SVG… (read more)
This has perplexed me for over a year at this point. The only page I have run into this issue on is https://create-react-app.dev/docs/getting-started and the animated SVG, but I imagine it would occur elsewhere if I ever ran into animated SVGs. Rather than try to describe it, I have included a screenshot of what I see (screencap is just a single frame, of course)
It animates, but it's like it is offset or only renders every other line or something. I don't know if this is the right place for this, but thought I'd try. Here are some browser specs:
```
Name | Firefox
-- | --
130.0.1
20240913135723
release Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0 Windows_NT 10.0 22631 Enabled
Application Basics
Name: Firefox Version: 130.0.1 Build ID: 20240913135723 Distribution ID: Update Channel: release User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0 OS: Windows_NT 10.0 22631 Launcher Process: Enabled Multiprocess Windows: 1/1 Fission Windows: 1/1 Enabled by default Enterprise Policies: Inactive Google Location Service Key: Found Google Safebrowsing Key: Found Mozilla Location Service Key: Found Safe Mode: false Memory Size (RAM): 15.9 GB Disk Space Available: 280 GB Pointing Devices: Mouse
Crash Reports for the Last 3 Days
Firefox Features
Name: Firefox Screenshots Version: 39.0.1 ID: screenshots@mozilla.org
Name: Form Autofill Version: 1.0.1 ID: formautofill@mozilla.org
Name: Picture-In-Picture Version: 1.0.0 ID: pictureinpicture@mozilla.org
Name: Web Compatibility Interventions Version: 130.2.0 ID: webcompat@mozilla.org
Name: WebCompat Reporter Version: 2.1.0 ID: webcompat-reporter@mozilla.org
Remote Features
Remote Processes
Type: Isolated Web Content Count: 3
Type: RDD Count: 1
Type: Preallocated Count: 3
Type: Extension Count: 1
Type: GPU Count: 1
Type: Socket Count: 1
Type: Privileged About Count: 1
Type: Utility Windows Media Foundation Count: 1
Type: Utility JavaScript Oracle Count: 1
Type: Utility Generic Audio Decoder Count: 1
Graphics
Features Window Device Pixel Ratios: 1 Compositing: WebRender Font Visibility Debug Info: Windows Platform Asynchronous Pan/Zoom: wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled; smooth pinch-zoom enabled WebGL 1 Driver WSI Info: outOfProcess: false inProcess: true EGL_VENDOR: Google Inc. (AMD) EGL_VERSION: 1.5 (ANGLE 2.1.19739 git hash: 419cd2c3213b) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_ANGLE_windows_ui_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_display_semaphore_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_ANGLE_create_context_extensions_enabled EGL_ANDROID_blob_cache EGL_ANDROID_recordable EGL_ANGLE_image_d3d11_texture EGL_ANGLE_create_context_backwards_compatible EGL_KHR_no_config_context EGL_KHR_create_context_no_error EGL_KHR_reusable_sync EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_device_query EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_platform_angle_d3d11on12 EGL_ANGLE_platform_angle_device_id EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses EGL_KHR_debug EGL_ANGLE_feature_control WebGL 1 Driver Renderer: Google Inc. (AMD) -- ANGLE (AMD, Radeon RX 570 Series Direct3D11 vs_5_0 ps_5_0, D3D11-31.0.14057.2005) WebGL 1 Driver Version: OpenGL ES 3.0.0 (ANGLE 2.1.19739 git hash: 419cd2c3213b) WebGL 1 Driver Extensions: GL_AMD_performance_monitor GL_ANGLE_base_vertex_base_instance GL_ANGLE_base_vertex_base_instance_shader_builtin GL_ANGLE_client_arrays GL_ANGLE_copy_texture_3d GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_get_serialized_context_string GL_ANGLE_get_tex_level_parameter GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_memory_size GL_ANGLE_multi_draw GL_ANGLE_multiview_multisample GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_provoking_vertex GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_multisample GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_lose_context GL_CHROMIUM_sync_query GL_EXT_EGL_image_external_wrap_modes GL_EXT_base_instance GL_EXT_blend_func_extended GL_EXT_blend_minmax GL_EXT_clip_control GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_frag_depth GL_EXT_instanced_arrays GL_EXT_map_buffer_range GL_EXT_multi_draw_indirect GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_bptc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_texture_type_2_10_10_10_REV GL_EXT_unpack_subimage GL_KHR_debug GL_KHR_parallel_shader_compile GL_KHR_robust_buffer_access_behavior GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_framebuffer_blit GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_EAC_R11_signed_texture GL_OES_compressed_EAC_R11_unsigned_texture GL_OES_compressed_EAC_RG11_signed_texture GL_OES_compressed_EAC_RG11_unsigned_texture GL_OES_compressed_ETC2_RGB8_texture GL_OES_compressed_ETC2_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_sRGB8_alpha_texture GL_OES_compressed_ETC2_sRGB8_alpha8_texture GL_OES_compressed_ETC2_sRGB8_texture GL_OES_depth24 GL_OES_depth32 GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_vertex_array_object GL_OVR_multiview GL_OVR_multiview2 GL_WEBGL_video_texture WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_float_blend EXT_frag_depth EXT_shader_texture_lod EXT_sRGB EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic MOZ_debug OES_element_index_uint OES_fbo_render_mipmap OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context WEBGL_provoking_vertex WebGL 2 Driver WSI Info: outOfProcess: false inProcess: true EGL_VENDOR: Google Inc. (AMD) EGL_VERSION: 1.5 (ANGLE 2.1.19739 git hash: 419cd2c3213b) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_ANGLE_windows_ui_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_display_semaphore_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_ANGLE_create_context_extensions_enabled EGL_ANDROID_blob_cache EGL_ANDROID_recordable EGL_ANGLE_image_d3d11_texture EGL_ANGLE_create_context_backwards_compatible EGL_KHR_no_config_context EGL_KHR_create_context_no_error EGL_KHR_reusable_sync EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_device_query EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_platform_angle_d3d11on12 EGL_ANGLE_platform_angle_device_id EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses EGL_KHR_debug EGL_ANGLE_feature_control WebGL 2 Driver Renderer: Google Inc. (AMD) -- ANGLE (AMD, Radeon RX 570 Series Direct3D11 vs_5_0 ps_5_0, D3D11-31.0.14057.2005) WebGL 2 Driver Version: OpenGL ES 3.0.0 (ANGLE 2.1.19739 git hash: 419cd2c3213b) WebGL 2 Driver Extensions: GL_AMD_performance_monitor GL_ANGLE_base_vertex_base_instance GL_ANGLE_base_vertex_base_instance_shader_builtin GL_ANGLE_client_arrays GL_ANGLE_copy_texture_3d GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_get_serialized_context_string GL_ANGLE_get_tex_level_parameter GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_memory_size GL_ANGLE_multi_draw GL_ANGLE_multiview_multisample GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_provoking_vertex GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_multisample GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_lose_context GL_CHROMIUM_sync_query GL_EXT_EGL_image_external_wrap_modes GL_EXT_base_instance GL_EXT_blend_func_extended GL_EXT_blend_minmax GL_EXT_clip_control GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_float_blend GL_EXT_frag_depth GL_EXT_instanced_arrays GL_EXT_map_buffer_range GL_EXT_multi_draw_indirect GL_EXT_multisampled_render_to_texture GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_bptc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_texture_type_2_10_10_10_REV GL_EXT_unpack_subimage GL_KHR_debug GL_KHR_parallel_shader_compile GL_KHR_robust_buffer_access_behavior GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_framebuffer_blit GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_EAC_R11_signed_texture GL_OES_compressed_EAC_R11_unsigned_texture GL_OES_compressed_EAC_RG11_signed_texture GL_OES_compressed_EAC_RG11_unsigned_texture GL_OES_compressed_ETC2_RGB8_texture GL_OES_compressed_ETC2_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_RGBA8_texture GL_OES_compressed_ETC2_punchthroughA_sRGB8_alpha_texture GL_OES_compressed_ETC2_sRGB8_alpha8_texture GL_OES_compressed_ETC2_sRGB8_texture GL_OES_depth24 GL_OES_depth32 GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_border_clamp GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_texture_stencil8 GL_OES_vertex_array_object GL_OVR_multiview GL_OVR_multiview2 GL_WEBGL_video_texture WebGL 2 Extensions: EXT_color_buffer_float EXT_float_blend EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic MOZ_debug OES_draw_buffers_indexed OES_texture_float_linear OVR_multiview2 WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_provoking_vertex Direct2D: true Target Frame Rate: 60 WebGPU Default Adapter: { "navigator.gpu": null } WebGPU Fallback Adapter: { "navigator.gpu": null } DirectWrite: true (10.0.22621.4111) GPU #1 Active: Yes Description: Radeon RX 570 Series Vendor ID: 0x1002 Device ID: 0x67df Driver Version: 31.0.14057.2005 Driver Date: 5-12-2023 Drivers: aticfx64 aticfx64 aticfx64 amdxc64 aticfx32 aticfx32 aticfx32 amdxc32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a Subsys ID: 341b1462 RAM: 8192 GPU #2 Active: No RAM: 0 Diagnostics AzureCanvasBackend: direct2d 1.1 AzureCanvasBackend (UI Process): skia AzureContentBackend: skia AzureContentBackend (UI Process): skia AzureFallbackCanvasBackend (UI Process): skia CMSOutputProfile: 10180 bytes, too large Display0: 1920x1080@59Hz scales:1.000000|1.000000 DisplayCount: 1 HardwareStretching: both=0 window-only=0 full-screen-only=1 none=0 error=0 OverlaySupport: NV12=None YUV2=None BGRA8=Software RGB10A2=None VpSR=Not Supported VpAutoHDR=Not Supported SwapChainTearingSupport: Supported GPUProcessPid: 8384 ClearType Parameters: Gamma: 2.2 Pixel Structure: RGB ClearType Level: 50 Enhanced Contrast: 100 Font Visibility Debug Info: Windows Platform Decision Log HW_COMPOSITING: default: available, D3D11_COMPOSITING: default: available, DIRECT2D: default: available, D3D11_HW_ANGLE: default: available, GPU_PROCESS: default: available, WEBRENDER: default: available, WEBRENDER_COMPOSITOR: default: available, WEBRENDER_PARTIAL: default: available, WEBRENDER_SHADER_CACHE: default: available, WEBRENDER_OPTIMIZED_SHADERS: default: available, WEBRENDER_ANGLE: default: available, WEBRENDER_DCOMP_PRESENT: default: available, WEBRENDER_SCISSORED_CACHE_CLEARS: default: available, WEBGPU: default: available, runtime: blocked, WebGPU cannot be enabled in release or beta, Blocklisted; failure code WEBGPU_DISABLE_RELEASE_OR_BETA WINDOW_OCCLUSION: default: available, VIDEO_HARDWARE_OVERLAY: default: available, VIDEO_SOFTWARE_OVERLAY: default: available, HW_DECODED_VIDEO_ZERO_COPY: default: blocked, Blocklisted by gfxInfo, VP8_HW_DECODE: default: available, VP9_HW_DECODE: default: available, REUSE_DECODER_DEVICE: default: available, BACKDROP_FILTER: default: available, CANVAS_RENDERER_THREAD: default: available, ACCELERATED_CANVAS2D: default: disabled, Disabled by default, Blocklisted; failure code FEATURE_FAILURE_DISABLED runtime: failed, Disabled by Remote Canvas, Blocklisted; failure code FEATURE_FAILURE_DISABLED_BY_REMOTE_CANVAS REMOTE_CANVAS: default: available,
Enumerate database
Content Decryption Modules Information
Key System Name: Video Robustness, Audio Robustness, Capabilities, Clear Lead, HDCP 2.2 Compatible
org.w3.clearkey: {"persistent":"Optional","distinctive":"NotAllowed","sessionType":"[Temporary]","codec":{"decodingAndDecrypting":["h264(all)"],"decryptingOnly":["aac(all)","flac(all)","opus(all)","vp9(all)","av1(all)","vorbis(all)","vp8(all)"]}}, No, No
com.widevine.alpha: SW_SECURE_CRYPTO,SW_SECURE_DECODE, SW_SECURE_CRYPTO, {"persistent":"Optional","distinctive":"NotAllowed","sessionType":"[Temporary]","codec":{"decodingAndDecrypting":["h264(all)","vp9(all)","av1(all)","vp8(all)"],"decryptingOnly":["aac(all)","flac(all)","opus(all)","vorbis(all)"]}}, Yes, No
AI chatbot (browser.ml.chat.enabled): true Picture-in-Picture: auto-open on tab switch (media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled): false Address Bar: show results during IME composition (browser.urlbar.keepPanelOpenDuringImeComposition): false WebRTC Global Mute Toggles (privacy.webrtc.globalMuteToggles): false Cookies: SameSite=None requires secure attribute (network.cookie.sameSite.noneRequiresSecure): false Media: JPEG XL (image.jxl.enabled): false CSS: Masonry Layout (layout.css.grid-template-masonry-value.enabled): false Web API: WebGPU (dom.webgpu.enabled): false Developer Tools: Service Worker debugging (devtools.debugger.features.windowless-service-workers): false
doh-rollout.doneFirstRun: true
doh-rollout.home-region: US
doh-rollout.mode: 2
doh-rollout.self-enabled: true
doh-rollout.uri: https://mozilla.cloudflare-dns.com/dns-query
dom.forms.autocomplete.formautofill: true
dom.security.https_only_mode: true
dom.security.https_only_mode_ever_enabled: true
dom.security.https_only_mode_ever_enabled_pbm: true
extensions.formautofill.addresses.enabled: false
extensions.formautofill.creditCards.enabled: false
extensions.lastAppVersion: 130.0.1
font.minimum-size.x-western: 13
font.name.monospace.x-western: Hack Nerd Font Mono
font.name.sans-serif.x-western: Microsoft Sans Serif
font.name.serif.x-western: Fira Sans
idle.lastDailyNotification: 1726675901
media.gmp-gmpopenh264.abi: x86_64-msvc-x64
Library Versions
NSPR Expected minimum version: 4.35 Version in use: 4.35
NSS Expected minimum version: 3.103 Version in use: 3.103
NSSSMIME Expected minimum version: 3.103 Version in use: 3.103
NSSSSL Expected minimum version: 3.103 Version in use: 3.103
NSSUTIL Expected minimum version: 3.103 Version in use: 3.103
Application Settings Requested Locales: ["en-US"] Available Locales: ["en-US"] App Locales: ["en-US"] Regional Preferences: ["en-US"] Default Locale: "en-US" Operating System System Locales: ["en-US"] Regional Preferences: ["en-US"]
Remote Debugging (Chromium Protocol)
`
```