Tag boundaries break ligature rendering
Categories
(Core :: Graphics: Text, defect, P3)
Tracking
()
People
(Reporter: yalterz, Unassigned)
Details
Attachments
(3 files)
Steps to reproduce
- Install the Fira Code font with programming ligatures
- Open a html file with contents:
<div style="font-family: Fira Code">
Hello<<span>/</span>div><br>
Hello<span></</span>div>
</div>
Actual results
The first line has the ligature cut half-way, but the second line renders properly. See the attached screenshot.
Expected results
Both lines render identically. The ligature is not broken.
Additional information
- The problem can be reproduced on a new Firefox profile.
- The problem can be reproduced on latest Nightly (20200123214224).
about:support
from the said Nightly on a new profile:
Application Basics
Name: Firefox
Version: 74.0a1
Build ID: 20200123214224
Update Channel: nightly
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0
OS: Linux 4.18.16-zen1-1-zen
Multiprocess Windows: 1/1 Enabled by default
Remote Processes: 4
Enterprise Policies: Active
Google Location Service Key: Found
Google Safebrowsing Key: Found
Mozilla Location Service Key: Found
Safe Mode: false
Crash Reports for the Last 3 Days
Nightly Features
Name: DoH Roll-Out
Version: 1.3.0
ID: doh-rollout@mozilla.org
Name: Firefox Screenshots
Version: 39.0.0
ID: screenshots@mozilla.org
Name: Form Autofill
Version: 1.0
ID: formautofill@mozilla.org
Name: Web Compat
Version: 6.4.0
ID: webcompat@mozilla.org
Name: WebCompat Reporter
Version: 1.1.0
ID: webcompat-reporter@mozilla.org
Remote Processes
Type: Web Content
Count: 2 / 8
Type: Extension
Count: 1
Type: Local File
Count: 1
Extensions
Name: Amazon.com
Version: 1.1
Enabled: true
ID: amazondotcom@search.mozilla.org
Name: Bing
Version: 1.1
Enabled: true
ID: bing@search.mozilla.org
Name: DuckDuckGo
Version: 1.0
Enabled: true
ID: ddg@search.mozilla.org
Name: eBay
Version: 1.0
Enabled: true
ID: ebay@search.mozilla.org
Name: Google
Version: 1.0
Enabled: true
ID: google@search.mozilla.org
Name: Twitter
Version: 1.0
Enabled: true
ID: twitter@search.mozilla.org
Name: Wikipedia (en)
Version: 1.0
Enabled: true
ID: wikipedia@search.mozilla.org
Graphics
Features
Compositing: WebRender
Asynchronous Pan/Zoom: wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled
WebGL 1 Driver WSI Info: EGL_VENDOR: Mesa Project EGL_VERSION: 1.5 EGL_EXTENSIONS: EGL_ANDROID_blob_cache EGL_ANDROID_native_fence_sync EGL_EXT_buffer_age EGL_EXT_create_context_robustness EGL_EXT_image_dma_buf_import EGL_EXT_swap_buffers_with_damage EGL_KHR_cl_event2 EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_create_context_no_error EGL_KHR_fence_sync EGL_KHR_get_all_proc_addresses EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image_base EGL_KHR_no_config_context EGL_KHR_reusable_sync EGL_KHR_surfaceless_context EGL_KHR_swap_buffers_with_damage EGL_EXT_pixel_format_float EGL_KHR_wait_sync EGL_MESA_configless_context EGL_MESA_drm_image EGL_MESA_image_dma_buf_export EGL_MESA_query_driver EGL_WL_bind_wayland_display EGL_WL_create_wayland_buffer_from_image EGL_EXTENSIONS(nullptr): EGL_EXT_platform_base EGL_EXT_device_base EGL_EXT_device_enumeration EGL_EXT_device_query EGL_KHR_client_get_all_proc_addresses EGL_EXT_client_extensions EGL_KHR_debug EGL_KHR_platform_x11 EGL_EXT_platform_x11 EGL_EXT_platform_device EGL_KHR_platform_wayland EGL_EXT_platform_wayland EGL_MESA_platform_gbm EGL_MESA_platform_surfaceless
WebGL 1 Driver Renderer: X.Org -- Radeon RX 580 Series (POLARIS10, DRM 3.26.0, 4.18.16-zen1-1-zen, LLVM 9.0.1)
WebGL 1 Driver Version: OpenGL ES 3.2 Mesa 19.3.2
WebGL 1 Driver Extensions: GL_EXT_blend_minmax GL_EXT_multi_draw_arrays GL_EXT_texture_filter_anisotropic GL_EXT_texture_compression_s3tc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_format_BGRA8888 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_mapbuffer GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_stencil8 GL_OES_texture_3D 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_vertex_half_float GL_EXT_texture_sRGB_decode GL_OES_EGL_image GL_OES_depth_texture GL_AMD_performance_monitor GL_OES_packed_depth_stencil GL_EXT_texture_type_2_10_10_10_REV GL_NV_conditional_render GL_OES_get_program_binary GL_APPLE_texture_max_level GL_EXT_discard_framebuffer GL_EXT_read_format_bgra GL_EXT_frag_depth GL_NV_fbo_color_attachments GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_array_object GL_OES_viewport_array GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_EXT_occlusion_query_boolean GL_EXT_robustness GL_EXT_texture_rg GL_EXT_unpack_subimage GL_NV_draw_buffers GL_NV_read_buffer GL_NV_read_depth GL_NV_read_depth_stencil GL_NV_read_stencil GL_EXT_draw_buffers GL_EXT_map_buffer_range GL_KHR_debug GL_KHR_robustness GL_KHR_texture_compression_astc_ldr GL_OES_depth_texture_cube_map GL_OES_required_internalformat GL_OES_surfaceless_context GL_EXT_color_buffer_float GL_EXT_sRGB_write_control GL_EXT_separate_shader_objects GL_EXT_shader_implicit_conversions GL_EXT_shader_integer_mix GL_EXT_tessellation_point_size GL_EXT_tessellation_shader GL_ANDROID_extension_pack_es31a GL_EXT_base_instance GL_EXT_compressed_ETC1_RGB8_sub_texture GL_EXT_copy_image GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_gpu_shader5 GL_EXT_polygon_offset_clamp GL_EXT_primitive_bounding_box GL_EXT_render_snorm GL_EXT_shader_io_blocks GL_EXT_texture_border_clamp GL_EXT_texture_buffer GL_EXT_texture_cube_map_array GL_EXT_texture_norm16 GL_EXT_texture_view GL_KHR_blend_equation_advanced GL_KHR_context_flush_control GL_KHR_robust_buffer_access_behavior GL_NV_image_formats GL_OES_copy_image GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_gpu_shader5 GL_OES_primitive_bounding_box GL_OES_sample_shading GL_OES_sample_variables GL_OES_shader_io_blocks GL_OES_shader_multisample_interpolation GL_OES_tessellation_point_size GL_OES_tessellation_shader GL_OES_texture_border_clamp GL_OES_texture_buffer GL_OES_texture_cube_map_array GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_OES_texture_view GL_EXT_blend_func_extended GL_EXT_buffer_storage GL_EXT_float_blend GL_EXT_geometry_point_size GL_EXT_geometry_shader GL_KHR_no_error GL_KHR_texture_compression_astc_sliced_3d GL_OES_EGL_image_external_essl3 GL_OES_geometry_point_size GL_OES_geometry_shader GL_OES_shader_image_atomic GL_EXT_clip_cull_distance GL_EXT_disjoint_timer_query GL_EXT_texture_compression_s3tc_srgb GL_EXT_window_rectangles GL_MESA_shader_integer_functions GL_EXT_clip_control GL_EXT_memory_object GL_EXT_memory_object_fd GL_EXT_semaphore GL_EXT_semaphore_fd GL_EXT_texture_compression_bptc GL_KHR_parallel_shader_compile GL_AMD_framebuffer_multisample_advanced GL_EXT_texture_sRGB_R8 GL_MESA_framebuffer_flip_y GL_EXT_depth_clamp GL_EXT_texture_query_lod
WebGL 1 Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_float_blend 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_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_lose_context
WebGL 2 Driver WSI Info: EGL_VENDOR: Mesa Project EGL_VERSION: 1.5 EGL_EXTENSIONS: EGL_ANDROID_blob_cache EGL_ANDROID_native_fence_sync EGL_EXT_buffer_age EGL_EXT_create_context_robustness EGL_EXT_image_dma_buf_import EGL_EXT_swap_buffers_with_damage EGL_KHR_cl_event2 EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_create_context_no_error EGL_KHR_fence_sync EGL_KHR_get_all_proc_addresses EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image_base EGL_KHR_no_config_context EGL_KHR_reusable_sync EGL_KHR_surfaceless_context EGL_KHR_swap_buffers_with_damage EGL_EXT_pixel_format_float EGL_KHR_wait_sync EGL_MESA_configless_context EGL_MESA_drm_image EGL_MESA_image_dma_buf_export EGL_MESA_query_driver EGL_WL_bind_wayland_display EGL_WL_create_wayland_buffer_from_image EGL_EXTENSIONS(nullptr): EGL_EXT_platform_base EGL_EXT_device_base EGL_EXT_device_enumeration EGL_EXT_device_query EGL_KHR_client_get_all_proc_addresses EGL_EXT_client_extensions EGL_KHR_debug EGL_KHR_platform_x11 EGL_EXT_platform_x11 EGL_EXT_platform_device EGL_KHR_platform_wayland EGL_EXT_platform_wayland EGL_MESA_platform_gbm EGL_MESA_platform_surfaceless
WebGL 2 Driver Renderer: X.Org -- Radeon RX 580 Series (POLARIS10, DRM 3.26.0, 4.18.16-zen1-1-zen, LLVM 9.0.1)
WebGL 2 Driver Version: OpenGL ES 3.2 Mesa 19.3.2
WebGL 2 Driver Extensions: GL_EXT_blend_minmax GL_EXT_multi_draw_arrays GL_EXT_texture_filter_anisotropic GL_EXT_texture_compression_s3tc GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_rgtc GL_EXT_texture_format_BGRA8888 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_mapbuffer GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_stencil8 GL_OES_texture_3D 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_vertex_half_float GL_EXT_texture_sRGB_decode GL_OES_EGL_image GL_OES_depth_texture GL_AMD_performance_monitor GL_OES_packed_depth_stencil GL_EXT_texture_type_2_10_10_10_REV GL_NV_conditional_render GL_OES_get_program_binary GL_APPLE_texture_max_level GL_EXT_discard_framebuffer GL_EXT_read_format_bgra GL_EXT_frag_depth GL_NV_fbo_color_attachments GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_array_object GL_OES_viewport_array GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_EXT_occlusion_query_boolean GL_EXT_robustness GL_EXT_texture_rg GL_EXT_unpack_subimage GL_NV_draw_buffers GL_NV_read_buffer GL_NV_read_depth GL_NV_read_depth_stencil GL_NV_read_stencil GL_EXT_draw_buffers GL_EXT_map_buffer_range GL_KHR_debug GL_KHR_robustness GL_KHR_texture_compression_astc_ldr GL_OES_depth_texture_cube_map GL_OES_required_internalformat GL_OES_surfaceless_context GL_EXT_color_buffer_float GL_EXT_sRGB_write_control GL_EXT_separate_shader_objects GL_EXT_shader_implicit_conversions GL_EXT_shader_integer_mix GL_EXT_tessellation_point_size GL_EXT_tessellation_shader GL_ANDROID_extension_pack_es31a GL_EXT_base_instance GL_EXT_compressed_ETC1_RGB8_sub_texture GL_EXT_copy_image GL_EXT_draw_buffers_indexed GL_EXT_draw_elements_base_vertex GL_EXT_gpu_shader5 GL_EXT_polygon_offset_clamp GL_EXT_primitive_bounding_box GL_EXT_render_snorm GL_EXT_shader_io_blocks GL_EXT_texture_border_clamp GL_EXT_texture_buffer GL_EXT_texture_cube_map_array GL_EXT_texture_norm16 GL_EXT_texture_view GL_KHR_blend_equation_advanced GL_KHR_context_flush_control GL_KHR_robust_buffer_access_behavior GL_NV_image_formats GL_OES_copy_image GL_OES_draw_buffers_indexed GL_OES_draw_elements_base_vertex GL_OES_gpu_shader5 GL_OES_primitive_bounding_box GL_OES_sample_shading GL_OES_sample_variables GL_OES_shader_io_blocks GL_OES_shader_multisample_interpolation GL_OES_tessellation_point_size GL_OES_tessellation_shader GL_OES_texture_border_clamp GL_OES_texture_buffer GL_OES_texture_cube_map_array GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_OES_texture_view GL_EXT_blend_func_extended GL_EXT_buffer_storage GL_EXT_float_blend GL_EXT_geometry_point_size GL_EXT_geometry_shader GL_KHR_no_error GL_KHR_texture_compression_astc_sliced_3d GL_OES_EGL_image_external_essl3 GL_OES_geometry_point_size GL_OES_geometry_shader GL_OES_shader_image_atomic GL_EXT_clip_cull_distance GL_EXT_disjoint_timer_query GL_EXT_texture_compression_s3tc_srgb GL_EXT_window_rectangles GL_MESA_shader_integer_functions GL_EXT_clip_control GL_EXT_memory_object GL_EXT_memory_object_fd GL_EXT_semaphore GL_EXT_semaphore_fd GL_EXT_texture_compression_bptc GL_KHR_parallel_shader_compile GL_AMD_framebuffer_multisample_advanced GL_EXT_texture_sRGB_R8 GL_MESA_framebuffer_flip_y GL_EXT_depth_clamp GL_EXT_texture_query_lod
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_texture_float_linear WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
Window Protocol: wayland
Off Main Thread Painting Enabled: true
Off Main Thread Painting Worker Count: 4
Target Frame Rate: 60
GPU #1
Active: Yes
Description: Radeon RX 580 Series (POLARIS10, DRM 3.26.0, 4.18.16-zen1-1-zen, LLVM 9.0.1)
Vendor ID: 0x1002
Device ID: 0x67df
Driver Vendor: mesa/radeonsi
Driver Version: 19.3.2.0
RAM: 8192
Diagnostics
AzureCanvasBackend: skia
AzureContentBackend: skia
AzureFallbackCanvasBackend: none
CairoUseXRender: 0
Display0: 4480x1440 default
DisplayCount: 1
Device Reset: Trigger Device Reset
Decision Log
GPU_PROCESS:
blocked by runtime: Wayland does not work in the GPU process
WEBRENDER:
opt-in by default: WebRender is an opt-in feature
available by user: Qualified enabled by pref
WEBRENDER_COMPOSITOR:
disabled by default: Disabled by default
WEBGPU:
disabled by default: Disabled by default
Media
Audio Backend: pulse-rust
Max Channels: 2
Preferred Sample Rate: 44100
Output Devices
Name: Group
Ellesmere HDMI Audio [Radeon RX 470/480 / 570/580/590] Digital Stereo (HDMI 5): /devices/pci0000:00/0000:00:01.0/0000:01:00.1/sound/card2
Built-in Audio Analog Stereo: /devices/pci0000:00/0000:00:1b.0/sound/card0
Built-in Audio Analog Stereo: /devices/platform/snd_aloop.0/sound/card1
Simultaneous output to Ellesmere HDMI Audio [Radeon RX 470/480 / 570/580/590] Digital Stereo (HDMI 5), Built-in Audio Analog Stereo, Built-in Audio Analog Stereo:
Input Devices
Name: Group
Monitor of Ellesmere HDMI Audio [Radeon RX 470/480 / 570/580/590] Digital Stereo (HDMI 5): /devices/pci0000:00/0000:00:01.0/0000:01:00.1/sound/card2
Monitor of Built-in Audio Analog Stereo: /devices/pci0000:00/0000:00:1b.0/sound/card0
HD Webcam C525 Mono: /devices/pci0000:00/0000:00:1c.7/0000:05:00.0/0000:06:05.0/0000:0a:00.0/usb5/5-1/5-1:1.0/sound/card5
C922 Pro Stream Webcam Analog Stereo: /devices/pci0000:00/0000:00:1d.0/usb2/2-1/2-1.1/2-1.1:1.2/sound/card4
Monitor of Built-in Audio Analog Stereo: /devices/platform/snd_aloop.0/sound/card1
Built-in Audio Analog Stereo: /devices/platform/snd_aloop.0/sound/card1
Monitor Source of Simultaneous output to Ellesmere HDMI Audio [Radeon RX 470/480 / 570/580/590] Digital Stereo (HDMI 5), Built-in Audio Analog Stereo, Built-in Audio Analog Stereo:
Media Capabilities
Enumerate database
Important Modified Preferences
browser.cache.disk.amount_written: 5939
browser.cache.disk.capacity: 1048576
browser.cache.disk.filesystem_reported: 1
browser.contentblocking.category: standard
browser.sessionstore.upgradeBackup.latestBuildID: 20200123214224
browser.startup.homepage_override.buildID: 20200123214224
browser.startup.homepage_override.mstone: 74.0a1
browser.urlbar.placeholderName: Google
dom.forms.autocomplete.formautofill: true
dom.push.userAgentID: adfb48a631e34cc6b91280478e4fcffb
extensions.lastAppVersion: 74.0a1
idle.lastDailyNotification: 1579838846
media.gmp-gmpopenh264.abi: x86_64-gcc3
media.gmp-gmpopenh264.lastUpdate: 1579838582
media.gmp-gmpopenh264.version: 1.8.1.1
media.gmp-manager.buildID: 20200123214224
media.gmp-manager.lastCheck: 1579838581
media.gmp.storage.version.observed: 1
network.predictor.cleaned-up: true
places.database.lastMaintenance: 1579838846
places.history.expiration.transient_current_max_pages: 112348
privacy.sanitize.pending: [{"id":"newtab-container","itemsToClear":[],"options":{}}]
security.remote_settings.crlite_filters.checked: 1579838581
security.remote_settings.intermediates.checked: 1579838581
security.sandbox.content.tempDirSuffix: ae5da1ca-3f97-4ced-881d-d25a1cc572f9
security.sandbox.plugin.tempDirSuffix: ced017be-c42a-4df0-a003-b51e8f0d3a2c
services.sync.engine.addresses.available: true
signon.importedFromSqlite: true
storage.vacuum.last.index: 0
storage.vacuum.last.places.sqlite: 1579838846
Important Locked Preferences
Places Database
JavaScript
Incremental GC: true
Accessibility
Activated: false
Prevent Accessibility: 0
Library Versions
NSPR
Expected minimum version: 4.25 Beta
Version in use: 4.25 Beta
NSS
Expected minimum version: 3.50 Beta
Version in use: 3.50 Beta
NSSSMIME
Expected minimum version: 3.50 Beta
Version in use: 3.50 Beta
NSSSSL
Expected minimum version: 3.50 Beta
Version in use: 3.50 Beta
NSSUTIL
Expected minimum version: 3.50 Beta
Version in use: 3.50 Beta
Sandbox
Seccomp-BPF (System Call Filtering): true
Seccomp Thread Synchronization: true
User Namespaces: true
Content Process Sandboxing: true
Media Plugin Sandboxing: true
Content Process Sandbox Level: 4
Effective Content Process Sandbox Level: 4
Rejected System Calls
Internationalization & Localization
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: ["ru-RU"]
Remote Debugging (Chromium Protocol)
Accepting Connections: false
URL:
Reporter | ||
Comment 1•5 years ago
|
||
Comment 2•5 years ago
|
||
It looks fine for me on macOS; this may be a Linux-specific rendering issue. The ligature is forming across the element boundary as expected; it's just at painting time that one of the partial-ligature paints is being clipped.
Comment 3•5 years ago
|
||
The priority flag is not set for this bug.
:lsalzman, could you have a look please?
For more information, please visit auto_nag documentation.
Comment 4•5 years ago
|
||
If you disable WebRender, does the problem go away?
Reporter | ||
Comment 5•5 years ago
|
||
The problem stays, but with WebRender disabled I get a few (one?) more pixels of the ligature on the left.
Reporter | ||
Comment 6•5 years ago
|
||
I think the easiest way to fix this would be to not render ligatures that would cross tag boundaries, which is what WebKit does.
Also confirmed on Windows with the Cascadia Code font.
Comment 8•5 years ago
|
||
(In reply to ExE Boss from comment #7)
I think the easiest way to fix this would be to not render ligatures that would cross tag boundaries, which is what WebKit does.
No. Inline element boundaries (where there is no style change such as a different font-family or size) are not supposed to affect text shaping.
https://drafts.csswg.org/css-text-3/#boundary-shaping says:
Text shaping must not be broken across inline box boundaries when there is no effective change in formatting, or if the only formatting changes do not affect the glyphs (as in applying text decoration).
Firefox is correct to form the ligature here. The clipped painting is a bug and we should try to understand and fix that problem, but breaking the text shaping is not the answer.
Updated•3 years ago
|
Description
•