1475651 - Scrolling horizontally on a vertical writing-mode page results in tearing on software compositor

Status: RESOLVED DUPLICATE of bug 1420712

(Core :: Graphics, defect, P3)

Description

[張俊芝(ZHANG Junzhi)]

Attachment: testcase.html

Text on a vertical writing-mode page "blinks" when the content is scrolling horizontally(which hurts eye much).

I tried scrolling the page horizontally for a while, and sometimes I can observe some text in a line obviously flows faster than the rest of the text in the same line, this makes a divergence effect on a page which is scrolling horizontally, as if the text is blinking, and would turn eyes tired when the user is reading for a long time while scrolling horizontally.

Chrome also has this issue, and is MORE SEVERE(i.e. much more obvious) than Firefox such that it can even immediately be observed, of course this hurts eye very much.

I can confirm at least the two browsers all have this issue on my computer, and I am using Linux. I am not either sure if you can also produce this issue, or if it can be produced on other OSs. I hope someone can also help me confirm this issue.

For now, my wild guess for the cause of the issue is that we use the APZ tech to allow content divergence, and then reconcile it in the twinkling of an eye. The problem is that we choose to reconcile the content pixel-by-pixel vertically, which works fine for a Latin-directional page, but makes a bad effect for a vertical writing page. If this is the issue, we should optimise the APZ to make it reconcile content pixel-by-pixel horizontally when the page's root block direction is horizontal.

Comment 1

[張俊芝(ZHANG Junzhi)]

Attachment: screen recording.mp4

I created a screen recording to show this issue

Comment 2

[張俊芝(ZHANG Junzhi)]

The reason why I uploaded the recording for Chrome instead of Firefox is because the issue is more obviously perceived in Chrome than in Firefox.

Comment 3

[張俊芝(ZHANG Junzhi)]

Kartikaya, could you help confirm if this issue also exists in your Firefox(See the two uploaded attachments)? Not sure which level the issue comes from.

Also, if this can be reproduced, do you think it can be an issue caused by APZ(I don't have much knowledge about APZ, so this is just my guess)?

Thank you.

Comment 4

[張俊芝(ZHANG Junzhi)]

Kartikaya, could you help confirm if this issue also exists in your Firefox(See the two uploaded attachments)?

Also, if this can be reproduced, do you think it can be an issue caused by APZ(I don't have much knowledge about APZ, so this is just my guess)?

Thank you.

Comment 5

[Alice0775 White]

does it seem vsync issue?

Comment 6

[張俊芝(ZHANG Junzhi)]

That's my guess. Alice, can it be reproduced in your Firefox?

Comment 7

[張俊芝(ZHANG Junzhi)]

Vsync? You mean it's an issue caused by the monitor itself?

Comment 8

[張俊芝(ZHANG Junzhi)]

If it's a issue from hardware, it's interesting that severity of tearing effect is different in Chrome and Firefox.

Comment 9

[張俊芝(ZHANG Junzhi)]

Vsync is turned on in my driver by default. So turning on vsync in hardware side seems not helpful at all for non-OpenGL rendering. So this seems to still need to be fixed in application side.

By turning off general.smoothScroll, the issue is gone, unfortunately this solution is obviously not prefect. It would be much better if smooth scroll can be used in tandem with vsync.

Comment 10

[Alice0775 White]

Attachment: vsync.html

(In reply to 張俊芝(Zhang Junzhi) from comment #6)
> That's my guess. Alice, can it be reproduced in your Firefox?

I can reproduce tearing on Linux, but not on Windows10.

Comment 11

[張俊芝(ZHANG Junzhi)]

(In reply to Alice0775 White from comment #10)
> Created attachment 8995795 [details]
> vsync.html
> 
> (In reply to 張俊芝(Zhang Junzhi) from comment #6)
> > That's my guess. Alice, can it be reproduced in your Firefox?
> 
> I can reproduce tearing on Linux, but not on Windows10.

FYI, I'm also using Linux.

Comment 12

[張俊芝(ZHANG Junzhi)]

So maybe it's OS-dependent?

Hope more of Windows users can help look into this issue.

Comment 13

[張俊芝(ZHANG Junzhi)]

Alice, after I've tested your new attachment for a while, I found that Firefox sometimes can reproduce it, sometimes not, inexplainably weird. However, Chrome almost consistently reproduce fairly obvious tearing effect.

Comment 14

[Kartikaya Gupta (email:[e-mail])]

I'm not able to reproduce this issue myself. However, it does look like a tearing issue caused by vsync misalignment. Can you attach a copy of your about:support contents, as well as let me know what the refresh rate of your monitor is? It's usually something like 60 Hz or 75 Hz but could be something else. You can usually find this information in the OS control panel under the display settings.

Comment 15

[張俊芝(ZHANG Junzhi)]

Okay. The refresh rate is 60Hz, and the resolution is 1920*1080.

{
  "application": {
    "name": "Firefox",
    "osVersion": "Linux 4.15.0-21deepin-generic",
    "version": "63.0a1",
    "buildID": "20180719234225",
    "userAgent": "Mozilla/5.0 (X11; Linux x86_64; rv:63.0) Gecko/20100101 Firefox/63.0",
    "safeMode": false,
    "updateChannel": "default",
    "supportURL": "https://support.mozilla.org/1/firefox/63.0a1/Linux/en-US/",
    "numTotalWindows": 1,
    "numRemoteWindows": 1,
    "remoteAutoStart": true,
    "currentContentProcesses": 1,
    "maxContentProcesses": 4,
    "autoStartStatus": 1,
    "policiesStatus": 0,
    "keyGoogleFound": false,
    "keyMozillaFound": false
  },
  "securitySoftware": {
    "registeredAntiVirus": "",
    "registeredAntiSpyware": "",
    "registeredFirewall": ""
  },
  "modifiedPreferences": {
    "browser.cache.disk.capacity": 1048576,
    "browser.cache.disk.filesystem_reported": 1,
    "browser.cache.disk.smart_size.first_run": false,
    "browser.sessionstore.upgradeBackup.latestBuildID": "20180719234225",
    "browser.startup.homepage_override.buildID": "20180719234225",
    "browser.startup.homepage_override.mstone": "63.0a1",
    "browser.urlbar.placeholderName": "Google",
    "browser.urlbar.timesBeforeHidingSuggestionsHint": 0,
    "dom.forms.autocomplete.formautofill": true,
    "dom.push.userAgentID": "5d373fe5b52c495d8cb2871b3bbfba41",
    "extensions.lastAppVersion": "63.0a1",
    "media.gmp-gmpopenh264.abi": "x86_64-gcc3",
    "media.gmp-gmpopenh264.lastUpdate": 1531682793,
    "media.gmp-gmpopenh264.version": "1.7.1",
    "media.gmp-manager.buildID": "20180719234225",
    "media.gmp-manager.lastCheck": 1532444247,
    "media.gmp.storage.version.observed": 1,
    "mousewheel.autodir.enabled": true,
    "network.cookie.prefsMigrated": true,
    "network.predictor.cleaned-up": true,
    "places.database.lastMaintenance": 1532010675,
    "places.history.expiration.transient_current_max_pages": 112348,
    "plugin.disable_full_page_plugin_for_types": "application/pdf",
    "privacy.sanitize.pending": "[{\"id\":\"newtab-container\",\"itemsToClear\":[],\"options\":{}}]",
    "security.sandbox.content.tempDirSuffix": "c6bad329-f49e-4ecb-83f4-d2a3c60157f0",
    "services.sync.engine.addresses.available": true,
    "services.sync.engine.creditcards.available": true,
    "signon.importedFromSqlite": true,
    "storage.vacuum.last.index": 1,
    "storage.vacuum.last.places.sqlite": 1532010675
  },
  "lockedPreferences": {},
  "media": {
    "currentAudioBackend": "remote",
    "currentMaxAudioChannels": 2,
    "currentPreferredSampleRate": 44100,
    "audioOutputDevices": [
      {
        "name": "內部音效 類比立體聲",
        "groupId": "/devices/pci0000:00/0000:00:1b.0/sound/card0",
        "vendor": "Intel Corporation",
        "type": 2,
        "state": 2,
        "preferred": 15,
        "supportedFormat": 12336,
        "defaultFormat": 16,
        "maxChannels": 2,
        "defaultRate": 44100,
        "maxRate": 384000,
        "minRate": 1,
        "maxLatency": 0,
        "minLatency": 0
      }
    ],
    "audioInputDevices": [
      {
        "name": "Monitor of 內部音效 類比立體聲",
        "groupId": "/devices/pci0000:00/0000:00:1b.0/sound/card0",
        "vendor": "Intel Corporation",
        "type": 1,
        "state": 2,
        "preferred": 0,
        "supportedFormat": 12336,
        "defaultFormat": 16,
        "maxChannels": 2,
        "defaultRate": 44100,
        "maxRate": 384000,
        "minRate": 1,
        "maxLatency": 0,
        "minLatency": 0
      },
      {
        "name": "內部音效 類比立體聲",
        "groupId": "/devices/pci0000:00/0000:00:1b.0/sound/card0",
        "vendor": "Intel Corporation",
        "type": 1,
        "state": 1,
        "preferred": 15,
        "supportedFormat": 12336,
        "defaultFormat": 16,
        "maxChannels": 2,
        "defaultRate": 44100,
        "maxRate": 384000,
        "minRate": 1,
        "maxLatency": 0,
        "minLatency": 0
      }
    ]
  },
  "javaScript": {
    "incrementalGCEnabled": true
  },
  "accessibility": {
    "isActive": false,
    "forceDisabled": 0,
    "handlerUsed": false,
    "instantiator": ""
  },
  "libraryVersions": {
    "NSPR": {
      "minVersion": "4.19",
      "version": "4.19"
    },
    "NSS": {
      "minVersion": "3.39 Beta",
      "version": "3.39 Beta"
    },
    "NSSUTIL": {
      "minVersion": "3.39 Beta",
      "version": "3.39 Beta"
    },
    "NSSSSL": {
      "minVersion": "3.39 Beta",
      "version": "3.39 Beta"
    },
    "NSSSMIME": {
      "minVersion": "3.39 Beta",
      "version": "3.39 Beta"
    }
  },
  "userJS": {
    "exists": true
  },
  "intl": {
    "localeService": {
      "requested": [
        "en-US"
      ],
      "available": [
        "en-US"
      ],
      "supported": [
        "en-US"
      ],
      "regionalPrefs": [
        "en-US"
      ],
      "defaultLocale": "en-US"
    },
    "osPrefs": {
      "systemLocales": [
        "zh-TW"
      ],
      "regionalPrefsLocales": [
        "zh-TW"
      ]
    }
  },
  "crashes": {
    "submitted": [],
    "pending": 0
  },
  "sandbox": {
    "hasSeccompBPF": true,
    "hasSeccompTSync": true,
    "hasPrivilegedUserNamespaces": true,
    "hasUserNamespaces": true,
    "canSandboxContent": true,
    "canSandboxMedia": true,
    "syscallLog": [],
    "contentSandboxLevel": 4,
    "effectiveContentSandboxLevel": 4
  },
  "graphics": {
    "numTotalWindows": 1,
    "numAcceleratedWindows": 0,
    "windowLayerManagerType": "Basic",
    "windowLayerManagerRemote": true,
    "windowUsingAdvancedLayers": false,
    "numAcceleratedWindowsMessage": [
      ""
    ],
    "adapterDescription": "NVIDIA Corporation -- GeForce GTX 650/PCIe/SSE2",
    "adapterVendorID": "NVIDIA Corporation",
    "adapterDeviceID": "GeForce GTX 650/PCIe/SSE2",
    "adapterRAM": "",
    "adapterDrivers": "",
    "driverVersion": "4.6.0 NVIDIA 387.34",
    "driverDate": "",
    "usesTiling": true,
    "contentUsesTiling": true,
    "offMainThreadPaintEnabled": true,
    "offMainThreadPaintWorkerCount": 3,
    "webgl1Renderer": "NVIDIA Corporation -- GeForce GTX 650/PCIe/SSE2",
    "webgl1Version": "4.6.0 NVIDIA 387.34",
    "webgl1DriverExtensions": "GL_AMD_multi_draw_indirect GL_AMD_seamless_cubemap_per_texture GL_ARB_arrays_of_arrays GL_ARB_base_instance GL_ARB_bindless_texture GL_ARB_blend_func_extended GL_ARB_buffer_storage GL_ARB_clear_buffer_object GL_ARB_clear_texture GL_ARB_clip_control GL_ARB_color_buffer_float GL_ARB_compatibility GL_ARB_compressed_texture_pixel_storage GL_ARB_conservative_depth GL_ARB_compute_shader GL_ARB_compute_variable_group_size GL_ARB_conditional_render_inverted GL_ARB_copy_buffer GL_ARB_copy_image GL_ARB_cull_distance GL_ARB_debug_output GL_ARB_depth_buffer_float GL_ARB_depth_clamp GL_ARB_depth_texture GL_ARB_derivative_control GL_ARB_direct_state_access GL_ARB_draw_buffers GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_draw_elements_base_vertex GL_ARB_draw_instanced GL_ARB_enhanced_layouts GL_ARB_ES2_compatibility GL_ARB_ES3_compatibility GL_ARB_ES3_1_compatibility GL_ARB_ES3_2_compatibility GL_ARB_explicit_attrib_location GL_ARB_explicit_uniform_location GL_ARB_fragment_coord_conventions GL_ARB_fragment_layer_viewport GL_ARB_fragment_program GL_ARB_fragment_program_shadow GL_ARB_fragment_shader GL_ARB_framebuffer_no_attachments GL_ARB_framebuffer_object GL_ARB_framebuffer_sRGB GL_ARB_geometry_shader4 GL_ARB_get_program_binary GL_ARB_get_texture_sub_image GL_ARB_gl_spirv GL_ARB_gpu_shader5 GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader_int64 GL_ARB_half_float_pixel GL_ARB_half_float_vertex GL_ARB_imaging GL_ARB_indirect_parameters GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_internalformat_query2 GL_ARB_invalidate_subdata GL_ARB_map_buffer_alignment GL_ARB_map_buffer_range GL_ARB_multi_bind GL_ARB_multi_draw_indirect GL_ARB_multisample GL_ARB_multitexture GL_ARB_occlusion_query GL_ARB_occlusion_query2 GL_ARB_parallel_shader_compile GL_ARB_pipeline_statistics_query GL_ARB_pixel_buffer_object GL_ARB_point_parameters GL_ARB_point_sprite GL_ARB_polygon_offset_clamp GL_ARB_program_interface_query GL_ARB_provoking_vertex GL_ARB_query_buffer_object GL_ARB_robust_buffer_access_behavior GL_ARB_robustness GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_seamless_cube_map GL_ARB_seamless_cubemap_per_texture GL_ARB_separate_shader_objects GL_ARB_shader_atomic_counter_ops GL_ARB_shader_atomic_counters GL_ARB_shader_ballot GL_ARB_shader_bit_encoding GL_ARB_shader_clock GL_ARB_shader_draw_parameters GL_ARB_shader_group_vote GL_ARB_shader_image_load_store GL_ARB_shader_image_size GL_ARB_shader_objects GL_ARB_shader_precision GL_ARB_shader_storage_buffer_object GL_ARB_shader_subroutine GL_ARB_shader_texture_image_samples GL_ARB_shader_texture_lod GL_ARB_shading_language_100 GL_ARB_shading_language_420pack GL_ARB_shading_language_include GL_ARB_shading_language_packing GL_ARB_shadow GL_ARB_sparse_buffer GL_ARB_sparse_texture GL_ARB_spirv_extensions GL_ARB_stencil_texturing GL_ARB_sync GL_ARB_tessellation_shader GL_ARB_texture_barrier GL_ARB_texture_border_clamp GL_ARB_texture_buffer_object GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_buffer_range GL_ARB_texture_compression GL_ARB_texture_compression_bptc GL_ARB_texture_compression_rgtc GL_ARB_texture_cube_map GL_ARB_texture_cube_map_array GL_ARB_texture_env_add GL_ARB_texture_env_combine GL_ARB_texture_env_crossbar GL_ARB_texture_env_dot3 GL_ARB_texture_filter_anisotropic GL_ARB_texture_float GL_ARB_texture_gather GL_ARB_texture_mirror_clamp_to_edge GL_ARB_texture_mirrored_repeat GL_ARB_texture_multisample GL_ARB_texture_non_power_of_two GL_ARB_texture_query_levels GL_ARB_texture_query_lod GL_ARB_texture_rectangle GL_ARB_texture_rg GL_ARB_texture_rgb10_a2ui GL_ARB_texture_stencil8 GL_ARB_texture_storage GL_ARB_texture_storage_multisample GL_ARB_texture_swizzle GL_ARB_texture_view GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_transform_feedback_instanced GL_ARB_transform_feedback_overflow_query GL_ARB_transpose_matrix GL_ARB_uniform_buffer_object GL_ARB_vertex_array_bgra GL_ARB_vertex_array_object GL_ARB_vertex_attrib_64bit GL_ARB_vertex_attrib_binding GL_ARB_vertex_buffer_object GL_ARB_vertex_program GL_ARB_vertex_shader GL_ARB_vertex_type_10f_11f_11f_rev GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_ARB_window_pos GL_ATI_draw_buffers GL_ATI_texture_float GL_ATI_texture_mirror_once GL_S3_s3tc GL_EXT_texture_env_add GL_EXT_abgr GL_EXT_bgra GL_EXT_bindable_uniform GL_EXT_blend_color GL_EXT_blend_equation_separate GL_EXT_blend_func_separate GL_EXT_blend_minmax GL_EXT_blend_subtract GL_EXT_compiled_vertex_array GL_EXT_Cg_shader GL_EXT_depth_bounds_test GL_EXT_direct_state_access GL_EXT_draw_buffers2 GL_EXT_draw_instanced GL_EXT_draw_range_elements GL_EXT_fog_coord GL_EXT_framebuffer_blit GL_EXT_framebuffer_multisample GL_EXTX_framebuffer_mixed_formats GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_framebuffer_object GL_EXT_framebuffer_sRGB GL_EXT_geometry_shader4 GL_EXT_gpu_program_parameters GL_EXT_gpu_shader4 GL_EXT_multi_draw_arrays GL_EXT_packed_depth_stencil GL_EXT_packed_float GL_EXT_packed_pixels GL_EXT_pixel_buffer_object GL_EXT_point_parameters GL_EXT_polygon_offset_clamp GL_EXT_provoking_vertex GL_EXT_rescale_normal GL_EXT_secondary_color GL_EXT_separate_shader_objects GL_EXT_separate_specular_color GL_EXT_shader_image_load_store GL_EXT_shader_integer_mix GL_EXT_shadow_funcs GL_EXT_stencil_two_side GL_EXT_stencil_wrap GL_EXT_texture3D GL_EXT_texture_array GL_EXT_texture_buffer_object GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_latc GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc GL_EXT_texture_cube_map GL_EXT_texture_edge_clamp GL_EXT_texture_env_combine GL_EXT_texture_env_dot3 GL_EXT_texture_filter_anisotropic GL_EXT_texture_integer GL_EXT_texture_lod GL_EXT_texture_lod_bias GL_EXT_texture_mirror_clamp GL_EXT_texture_object GL_EXT_texture_shared_exponent GL_EXT_texture_sRGB GL_EXT_texture_sRGB_decode GL_EXT_texture_storage GL_EXT_texture_swizzle GL_EXT_timer_query GL_EXT_transform_feedback2 GL_EXT_vertex_array GL_EXT_vertex_array_bgra GL_EXT_vertex_attrib_64bit GL_EXT_window_rectangles GL_EXT_x11_sync_object GL_EXT_import_sync_object GL_NV_robustness_video_memory_purge GL_IBM_rasterpos_clip GL_IBM_texture_mirrored_repeat GL_KHR_context_flush_control GL_KHR_debug GL_EXT_memory_object GL_EXT_memory_object_fd GL_KHR_parallel_shader_compile GL_KHR_no_error GL_KHR_robust_buffer_access_behavior GL_KHR_robustness GL_EXT_semaphore GL_EXT_semaphore_fd GL_KTX_buffer_region GL_NV_alpha_to_coverage_dither_control GL_NV_bindless_multi_draw_indirect GL_NV_bindless_multi_draw_indirect_count GL_NV_bindless_texture GL_NV_blend_equation_advanced GL_NV_blend_square GL_NV_command_list GL_NV_compute_program5 GL_NV_conditional_render GL_NV_copy_depth_to_color GL_NV_copy_image GL_NV_depth_buffer_float GL_NV_depth_clamp GL_NV_draw_texture GL_NV_draw_vulkan_image GL_NV_ES1_1_compatibility GL_NV_ES3_1_compatibility GL_NV_explicit_multisample GL_NV_fence GL_NV_float_buffer GL_NV_fog_distance GL_NV_fragment_program GL_NV_fragment_program_option GL_NV_fragment_program2 GL_NV_framebuffer_multisample_coverage GL_NV_geometry_shader4 GL_NV_gpu_program4 GL_NV_internalformat_sample_query GL_NV_gpu_program4_1 GL_NV_gpu_program5 GL_NV_gpu_program5_mem_extended GL_NV_gpu_program_fp64 GL_NV_gpu_shader5 GL_NV_half_float GL_NV_light_max_exponent GL_NV_multisample_coverage GL_NV_multisample_filter_hint GL_NV_occlusion_query GL_NV_packed_depth_stencil GL_NV_parameter_buffer_object GL_NV_parameter_buffer_object2 GL_NV_path_rendering GL_NV_pixel_data_range GL_NV_point_sprite GL_NV_primitive_restart GL_NV_query_resource GL_NV_query_resource_tag GL_NV_register_combiners GL_NV_register_combiners2 GL_NV_shader_atomic_counters GL_NV_shader_atomic_float GL_NV_shader_buffer_load GL_NV_shader_storage_buffer_object GL_NV_texgen_reflection GL_NV_texture_barrier GL_NV_texture_compression_vtc GL_NV_texture_env_combine4 GL_NV_texture_multisample GL_NV_texture_rectangle GL_NV_texture_rectangle_compressed GL_NV_texture_shader GL_NV_texture_shader2 GL_NV_texture_shader3 GL_NV_transform_feedback GL_NV_transform_feedback2 GL_NV_uniform_buffer_unified_memory GL_NV_vdpau_interop GL_NV_vertex_array_range GL_NV_vertex_array_range2 GL_NV_vertex_attrib_integer_64bit GL_NV_vertex_buffer_unified_memory GL_NV_vertex_program GL_NV_vertex_program1_1 GL_NV_vertex_program2 GL_NV_vertex_program2_option GL_NV_vertex_program3 GL_NVX_conditional_render GL_NVX_gpu_memory_info GL_NVX_nvenc_interop GL_NV_shader_thread_group GL_NV_shader_thread_shuffle GL_KHR_blend_equation_advanced GL_SGIS_generate_mipmap GL_SGIS_texture_lod GL_SGIX_depth_texture GL_SGIX_shadow GL_SUN_slice_accum ",
    "webgl1Extensions": "ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint 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_etc 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",
    "webgl1WSIInfo": "GLX 1.4\nGLX_VENDOR(client): NVIDIA Corporation\nGLX_VENDOR(server): NVIDIA Corporation\nExtensions: GLX_EXT_visual_info GLX_EXT_visual_rating GLX_EXT_import_context GLX_SGIX_fbconfig GLX_SGIX_pbuffer GLX_SGI_video_sync GLX_SGI_swap_control GLX_EXT_swap_control GLX_EXT_swap_control_tear GLX_EXT_texture_from_pixmap GLX_EXT_buffer_age GLX_ARB_create_context GLX_ARB_create_context_profile GLX_EXT_create_context_es_profile GLX_EXT_create_context_es2_profile GLX_ARB_create_context_no_error GLX_ARB_create_context_robustness GLX_NV_delay_before_swap GLX_EXT_stereo_tree GLX_ARB_context_flush_control GLX_NV_robustness_video_memory_purge GLX_ARB_multisample GLX_NV_float_buffer GLX_ARB_fbconfig_float GLX_EXT_framebuffer_sRGB GLX_NV_multisample_coverage GLX_NV_copy_image GLX_ARB_get_proc_address ",
    "webgl2Renderer": "NVIDIA Corporation -- GeForce GTX 650/PCIe/SSE2",
    "webgl2Version": "3.2.0 NVIDIA 387.34",
    "webgl2DriverExtensions": "GL_AMD_multi_draw_indirect GL_AMD_seamless_cubemap_per_texture GL_ARB_arrays_of_arrays GL_ARB_base_instance GL_ARB_bindless_texture GL_ARB_blend_func_extended GL_ARB_buffer_storage GL_ARB_clear_buffer_object GL_ARB_clear_texture GL_ARB_clip_control GL_ARB_color_buffer_float GL_ARB_compressed_texture_pixel_storage GL_ARB_conservative_depth GL_ARB_compute_shader GL_ARB_compute_variable_group_size GL_ARB_conditional_render_inverted GL_ARB_copy_buffer GL_ARB_copy_image GL_ARB_cull_distance GL_ARB_debug_output GL_ARB_depth_buffer_float GL_ARB_depth_clamp GL_ARB_depth_texture GL_ARB_derivative_control GL_ARB_direct_state_access GL_ARB_draw_buffers GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_draw_elements_base_vertex GL_ARB_draw_instanced GL_ARB_enhanced_layouts GL_ARB_ES2_compatibility GL_ARB_ES3_compatibility GL_ARB_ES3_1_compatibility GL_ARB_ES3_2_compatibility GL_ARB_explicit_attrib_location GL_ARB_explicit_uniform_location GL_ARB_fragment_coord_conventions GL_ARB_fragment_layer_viewport GL_ARB_fragment_program GL_ARB_fragment_program_shadow GL_ARB_fragment_shader GL_ARB_framebuffer_no_attachments GL_ARB_framebuffer_object GL_ARB_framebuffer_sRGB GL_ARB_geometry_shader4 GL_ARB_get_program_binary GL_ARB_get_texture_sub_image GL_ARB_gl_spirv GL_ARB_gpu_shader5 GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader_int64 GL_ARB_half_float_pixel GL_ARB_half_float_vertex GL_ARB_imaging GL_ARB_indirect_parameters GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_internalformat_query2 GL_ARB_invalidate_subdata GL_ARB_map_buffer_alignment GL_ARB_map_buffer_range GL_ARB_multi_bind GL_ARB_multi_draw_indirect GL_ARB_multisample GL_ARB_multitexture GL_ARB_occlusion_query GL_ARB_occlusion_query2 GL_ARB_parallel_shader_compile GL_ARB_pipeline_statistics_query GL_ARB_pixel_buffer_object GL_ARB_point_parameters GL_ARB_point_sprite GL_ARB_polygon_offset_clamp GL_ARB_program_interface_query GL_ARB_provoking_vertex GL_ARB_query_buffer_object GL_ARB_robust_buffer_access_behavior GL_ARB_robustness GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_seamless_cube_map GL_ARB_seamless_cubemap_per_texture GL_ARB_separate_shader_objects GL_ARB_shader_atomic_counter_ops GL_ARB_shader_atomic_counters GL_ARB_shader_ballot GL_ARB_shader_bit_encoding GL_ARB_shader_clock GL_ARB_shader_draw_parameters GL_ARB_shader_group_vote GL_ARB_shader_image_load_store GL_ARB_shader_image_size GL_ARB_shader_objects GL_ARB_shader_precision GL_ARB_shader_storage_buffer_object GL_ARB_shader_subroutine GL_ARB_shader_texture_image_samples GL_ARB_shader_texture_lod GL_ARB_shading_language_100 GL_ARB_shading_language_420pack GL_ARB_shading_language_include GL_ARB_shading_language_packing GL_ARB_shadow GL_ARB_sparse_buffer GL_ARB_sparse_texture GL_ARB_spirv_extensions GL_ARB_stencil_texturing GL_ARB_sync GL_ARB_tessellation_shader GL_ARB_texture_barrier GL_ARB_texture_border_clamp GL_ARB_texture_buffer_object GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_buffer_range GL_ARB_texture_compression GL_ARB_texture_compression_bptc GL_ARB_texture_compression_rgtc GL_ARB_texture_cube_map GL_ARB_texture_cube_map_array GL_ARB_texture_env_add GL_ARB_texture_env_combine GL_ARB_texture_env_crossbar GL_ARB_texture_env_dot3 GL_ARB_texture_filter_anisotropic GL_ARB_texture_float GL_ARB_texture_gather GL_ARB_texture_mirror_clamp_to_edge GL_ARB_texture_mirrored_repeat GL_ARB_texture_multisample GL_ARB_texture_non_power_of_two GL_ARB_texture_query_levels GL_ARB_texture_query_lod GL_ARB_texture_rectangle GL_ARB_texture_rg GL_ARB_texture_rgb10_a2ui GL_ARB_texture_stencil8 GL_ARB_texture_storage GL_ARB_texture_storage_multisample GL_ARB_texture_swizzle GL_ARB_texture_view GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_transform_feedback_instanced GL_ARB_transform_feedback_overflow_query GL_ARB_transpose_matrix GL_ARB_uniform_buffer_object GL_ARB_vertex_array_bgra GL_ARB_vertex_array_object GL_ARB_vertex_attrib_64bit GL_ARB_vertex_attrib_binding GL_ARB_vertex_buffer_object GL_ARB_vertex_program GL_ARB_vertex_shader GL_ARB_vertex_type_10f_11f_11f_rev GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_ARB_window_pos GL_ATI_draw_buffers GL_ATI_texture_float GL_ATI_texture_mirror_once GL_S3_s3tc GL_EXT_texture_env_add GL_EXT_abgr GL_EXT_bgra GL_EXT_bindable_uniform GL_EXT_blend_color GL_EXT_blend_equation_separate GL_EXT_blend_func_separate GL_EXT_blend_minmax GL_EXT_blend_subtract GL_EXT_compiled_vertex_array GL_EXT_Cg_shader GL_EXT_depth_bounds_test GL_EXT_direct_state_access GL_EXT_draw_buffers2 GL_EXT_draw_instanced GL_EXT_draw_range_elements GL_EXT_fog_coord GL_EXT_framebuffer_blit GL_EXT_framebuffer_multisample GL_EXTX_framebuffer_mixed_formats GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_framebuffer_object GL_EXT_framebuffer_sRGB GL_EXT_geometry_shader4 GL_EXT_gpu_program_parameters GL_EXT_gpu_shader4 GL_EXT_multi_draw_arrays GL_EXT_packed_depth_stencil GL_EXT_packed_float GL_EXT_packed_pixels GL_EXT_pixel_buffer_object GL_EXT_point_parameters GL_EXT_polygon_offset_clamp GL_EXT_provoking_vertex GL_EXT_rescale_normal GL_EXT_secondary_color GL_EXT_separate_shader_objects GL_EXT_separate_specular_color GL_EXT_shader_image_load_store GL_EXT_shader_integer_mix GL_EXT_shadow_funcs GL_EXT_stencil_two_side GL_EXT_stencil_wrap GL_EXT_texture3D GL_EXT_texture_array GL_EXT_texture_buffer_object GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_latc GL_EXT_texture_compression_rgtc GL_EXT_texture_compression_s3tc GL_EXT_texture_cube_map GL_EXT_texture_edge_clamp GL_EXT_texture_env_combine GL_EXT_texture_env_dot3 GL_EXT_texture_filter_anisotropic GL_EXT_texture_integer GL_EXT_texture_lod GL_EXT_texture_lod_bias GL_EXT_texture_mirror_clamp GL_EXT_texture_object GL_EXT_texture_shared_exponent GL_EXT_texture_sRGB GL_EXT_texture_sRGB_decode GL_EXT_texture_storage GL_EXT_texture_swizzle GL_EXT_timer_query GL_EXT_transform_feedback2 GL_EXT_vertex_array GL_EXT_vertex_array_bgra GL_EXT_vertex_attrib_64bit GL_EXT_window_rectangles GL_EXT_x11_sync_object GL_EXT_import_sync_object GL_NV_robustness_video_memory_purge GL_IBM_rasterpos_clip GL_IBM_texture_mirrored_repeat GL_KHR_context_flush_control GL_KHR_debug GL_EXT_memory_object GL_EXT_memory_object_fd GL_KHR_parallel_shader_compile GL_KHR_no_error GL_KHR_robust_buffer_access_behavior GL_KHR_robustness GL_EXT_semaphore GL_EXT_semaphore_fd GL_KTX_buffer_region GL_NV_alpha_to_coverage_dither_control GL_NV_bindless_multi_draw_indirect GL_NV_bindless_multi_draw_indirect_count GL_NV_bindless_texture GL_NV_blend_equation_advanced GL_NV_blend_square GL_NV_command_list GL_NV_compute_program5 GL_NV_conditional_render GL_NV_copy_depth_to_color GL_NV_copy_image GL_NV_depth_buffer_float GL_NV_depth_clamp GL_NV_draw_texture GL_NV_draw_vulkan_image GL_NV_ES1_1_compatibility GL_NV_ES3_1_compatibility GL_NV_explicit_multisample GL_NV_fence GL_NV_float_buffer GL_NV_fog_distance GL_NV_fragment_program GL_NV_fragment_program_option GL_NV_fragment_program2 GL_NV_framebuffer_multisample_coverage GL_NV_geometry_shader4 GL_NV_gpu_program4 GL_NV_internalformat_sample_query GL_NV_gpu_program4_1 GL_NV_gpu_program5 GL_NV_gpu_program5_mem_extended GL_NV_gpu_program_fp64 GL_NV_gpu_shader5 GL_NV_half_float GL_NV_light_max_exponent GL_NV_multisample_coverage GL_NV_multisample_filter_hint GL_NV_occlusion_query GL_NV_packed_depth_stencil GL_NV_parameter_buffer_object GL_NV_parameter_buffer_object2 GL_NV_path_rendering GL_NV_pixel_data_range GL_NV_point_sprite GL_NV_primitive_restart GL_NV_query_resource GL_NV_query_resource_tag GL_NV_register_combiners GL_NV_register_combiners2 GL_NV_shader_atomic_counters GL_NV_shader_atomic_float GL_NV_shader_buffer_load GL_NV_shader_storage_buffer_object GL_NV_texgen_reflection GL_NV_texture_barrier GL_NV_texture_compression_vtc GL_NV_texture_env_combine4 GL_NV_texture_multisample GL_NV_texture_rectangle GL_NV_texture_rectangle_compressed GL_NV_texture_shader GL_NV_texture_shader2 GL_NV_texture_shader3 GL_NV_transform_feedback GL_NV_transform_feedback2 GL_NV_uniform_buffer_unified_memory GL_NV_vdpau_interop GL_NV_vertex_array_range GL_NV_vertex_array_range2 GL_NV_vertex_attrib_integer_64bit GL_NV_vertex_buffer_unified_memory GL_NV_vertex_program GL_NV_vertex_program1_1 GL_NV_vertex_program2 GL_NV_vertex_program2_option GL_NV_vertex_program3 GL_NVX_conditional_render GL_NVX_gpu_memory_info GL_NVX_nvenc_interop GL_NV_shader_thread_group GL_NV_shader_thread_shuffle GL_KHR_blend_equation_advanced GL_SGIS_generate_mipmap GL_SGIS_texture_lod GL_SGIX_depth_texture GL_SGIX_shadow GL_SUN_slice_accum",
    "webgl2Extensions": "EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_etc WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context",
    "webgl2WSIInfo": "GLX 1.4\nGLX_VENDOR(client): NVIDIA Corporation\nGLX_VENDOR(server): NVIDIA Corporation\nExtensions: GLX_EXT_visual_info GLX_EXT_visual_rating GLX_EXT_import_context GLX_SGIX_fbconfig GLX_SGIX_pbuffer GLX_SGI_video_sync GLX_SGI_swap_control GLX_EXT_swap_control GLX_EXT_swap_control_tear GLX_EXT_texture_from_pixmap GLX_EXT_buffer_age GLX_ARB_create_context GLX_ARB_create_context_profile GLX_EXT_create_context_es_profile GLX_EXT_create_context_es2_profile GLX_ARB_create_context_no_error GLX_ARB_create_context_robustness GLX_NV_delay_before_swap GLX_EXT_stereo_tree GLX_ARB_context_flush_control GLX_NV_robustness_video_memory_purge GLX_ARB_multisample GLX_NV_float_buffer GLX_ARB_fbconfig_float GLX_EXT_framebuffer_sRGB GLX_NV_multisample_coverage GLX_NV_copy_image GLX_ARB_get_proc_address ",
    "info": {
      "AzureCanvasBackend": "skia",
      "AzureFallbackCanvasBackend": "none",
      "AzureContentBackend": "skia",
      "AzureCanvasAccelerated": 0,
      "CairoUseXRender": 0,
      "ApzWheelInput": 1,
      "ApzDragInput": 1,
      "ApzKeyboardInput": 1,
      "ApzAutoscrollInput": 1,
      "TileHeight": 512,
      "TileWidth": 512
    },
    "featureLog": {
      "features": [
        {
          "name": "HW_COMPOSITING",
          "description": "Compositing",
          "status": "blocked",
          "log": [
            {
              "type": "default",
              "status": "blocked",
              "message": "Acceleration blocked by platform"
            }
          ]
        },
        {
          "name": "OPENGL_COMPOSITING",
          "description": "OpenGL Compositing",
          "status": "unavailable",
          "log": [
            {
              "type": "default",
              "status": "unavailable",
              "message": "Hardware compositing is disabled"
            }
          ]
        },
        {
          "name": "WEBRENDER",
          "description": "WebRender",
          "status": "unavailable",
          "log": [
            {
              "type": "default",
              "status": "opt-in",
              "message": "WebRender is an opt-in feature"
            },
            {
              "type": "runtime",
              "status": "unavailable",
              "message": "Hardware compositing is disabled"
            }
          ]
        },
        {
          "name": "OMTP",
          "description": "Off Main Thread Painting",
          "status": "available",
          "log": [
            {
              "type": "default",
              "status": "available"
            }
          ]
        }
      ],
      "fallbacks": []
    },
    "crashGuards": []
  },
  "extensions": [],
  "features": [
    {
      "name": "Activity Stream",
      "version": "2018.07.18.1179-6b6a3463",
      "id": "[e-mail]"
    },
    {
      "name": "Application Update Service Helper",
      "version": "2.0",
      "id": "[e-mail]"
    },
    {
      "name": "Firefox Screenshots",
      "version": "33.0.0",
      "id": "[e-mail]"
    },
    {
      "name": "Follow-on Search Telemetry",
      "version": "0.9.7",
      "id": "[e-mail]"
    },
    {
      "name": "Form Autofill",
      "version": "1.0",
      "id": "[e-mail]"
    },
    {
      "name": "Photon onboarding",
      "version": "1.0",
      "id": "[e-mail]"
    },
    {
      "name": "Pocket",
      "version": "1.0.5",
      "id": "[e-mail]"
    },
    {
      "name": "Web Compat",
      "version": "2.0",
      "id": "[e-mail]"
    },
    {
      "name": "WebCompat Reporter",
      "version": "1.0.0",
      "id": "[e-mail]"
    }
  ]
}

Comment 16

[Kartikaya Gupta (email:[e-mail])]

Ok, Can you try enabling hw acceleration by setting layers.acceleration.force-enabled to true in about:config, and restarting the browser? I suspect what's happening here is that because we default to basic composition on Linux, we use a 60fps software vsync timer rather than listen for the vsync signal from the hardware, and so we can end up compositing partway through the real vsync. Turning on hardware acceleration should also switch to listening for the hardware vsync signal.

The risk is that you may run into other glitches caused by buggy graphics drivers, but for a lot of users it works great.

Comment 17

[張俊芝(ZHANG Junzhi)]

After setting layers.acceleration.force-enabled to true, this issue is amazingly gone. Great!

Thank you very much, Kartikaya!

Comment 18

[張俊芝(ZHANG Junzhi)]

I am wondering if it can also be fixed in software side, since layers.acceleration.force-enabled doesn't default to true, so typical users still suffer from it when visiting a page like this.

Comment 19

[Kartikaya Gupta (email:[e-mail])]

I think the solution is to get bug 594876 fixed.

Comment 20

[mirh]

Uhmm.. Is tearing the right word?
OP talked about "blinking" (which I'm not sure in which shape or form could entail the image getting "cut").. and I don't see how, anyway, we would escape deepin-wm compositing. 

I wonder if using a not-so-much-tested DE, or the almost year old graphics driver, couldn't play a role.

Comment 21

[Kartikaya Gupta (email:[e-mail])]

(In reply to mirh from comment #20)
> Uhmm.. Is tearing the right word?

The screen recording shows tearing, not blinking.

Comment 22

[張俊芝(ZHANG Junzhi)]

Deepin uses GTK+ as its underlying rendering library, which is one of the most widely-used rendering library on Linux.

My graphics card is GeForce GTX 650, not very old, and I use the timely official driver card supplied by Nvidia.

My environment is just common as many Linux users have. After turning on hardware acceleration for layers, the issue is gone. So the issue is about hardware acceleration for layers which is turned off by default, but not about my environment being speicial.

I originally couldn't think of a better name to describe tearing caused by "async rendering", sorry for my poor english, I used blinking to mean tearing.

Comment 23

[Darkspirit]

(In reply to 張俊芝(Zhang Junzhi) from comment #22)
> My graphics card is GeForce GTX 650, not very old, and I use the timely official driver card supplied by Nvidia.

Just to mention it: The proprietary Nvidia driver causes tearing on KDE Plasma.
https://kver.wordpress.com/2017/03/29/tearing-with-nvidia-proprietary-drivers-on-plasma-try-this/
I ticked "Force Full Composition Pipeline" and don't see tearing since then.

Comment 24

[mirh]

^ this (and uh, sorry, I had missed the video)

But there's nothing "timely" in a driver released this November.

Comment 25

[Darkspirit]

(from comment #17)

After setting layers.acceleration.force-enabled to true, this issue is amazingly gone. Great!

Tearing with "Basic" compositor is tracked by bug 1420712.