1408628 - Netflix trailer's NETFLIX logo letters are pixelated in Firefox on Mac, but not in Chrome

Status: NEW

(Core :: Audio/Video: Playback, defect, P3)

Description

[Chris Peterson [:cpeterson]]

STR:
1. On a Mac, watch the Netflix trailer for "Midnight Diner: Tokyo Stories" (fullscreen or not): https://www.netflix.com/watch/80144688
2. Pause the trailer at time 0:16.

RESULT:
The NETFLIX logo's letters look pixelated and have horizontal "fringe" in all versions of Firefox I tested (ESR, 52, Firefox 56, and Nightly 58) on my MacBook Pro running macOS 10.13 with Widevine CDM 1.4.8.1008.

The NETFLIX logo's letters look normal (or almost too blurry) in Chrome 61 on the same MacBook Pro and in Firefox and Chrome on my Windows 10 laptop.

Also, the NETFLIX logo's red color seems bolder or more vivid in Firefox than Chrome. Using macOS's Digital Color Meter app to inspect the screenshots' hex color values, the Mac Firefox reds are close to 0xD60013 but the Mac Chrome reds are closer to 0xD0201C (i.e. non-zero green value). Perhaps, I don't think this is an artifact from the screen capture or the frame on which I paused the videos because the Mac color difference was noticeable when playing the video.

See the attached screenshots.

Comment 1

[Chris Peterson [:cpeterson]]

Attachment: macOS_Firefox_58.0a1.png

screenshot of Firefox on macOS

Comment 2

[Chris Peterson [:cpeterson]]

Attachment: macOS_Chrome_61.png

screenshot of Chrome on macOS

Comment 3

[Chris Peterson [:cpeterson]]

Attachment: Windows_Firefox_58.0a1.png

screenshot of Firefox on Windows

Comment 4

[Chris Peterson [:cpeterson]]

Attachment: Windows_Chrome_62.png

screenshot of Chrome on Windows

Comment 5

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

I can't reproduce it on my Mac. Can you try with a clean profile?

Failing that, try setting layers.acceleration.disabled=false and restarting to see if you can still reproduce the issue.

Comment 6

[Anthony Jones (:ajones, :kentuckyfriedtakahe, :k17e)]

I meant to suggest trying layers.acceleration.disabled=true

Comment 7

[Chris Peterson [:cpeterson]]

I can still reproduce the problem in a clean profile with layers.acceleration.disabled=true.

Here is my about:support info:

Application Basics
------------------

Name: Firefox
Version: 58.0a1
Build ID: 20171016220427
Update Channel: nightly
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:58.0) Gecko/20100101 Firefox/58.0
OS: Darwin 17.0.0
Multiprocess Windows: 1/1 (Enabled by default)
Web Content Processes: 1/4
Stylo: true (enabled by default)
Google Key: Found
Mozilla Location Service Key: Found
Safe Mode: false

Crash Reports for the Last 3 Days
---------------------------------

Report ID: bp-211cd3ed-d33e-4ac8-9e31-bece11171014
Submitted: 2 days ago

All Crash Reports

Nightly Features
----------------

Name: Activity Stream
Version: 2017.10.13.1281-6245c446
ID: [e-mail]

Name: Application Update Service Helper
Version: 2.0
ID: [e-mail]

Name: Firefox Screenshots
Version: 19.2.0
ID: [e-mail]

Name: FlyWeb
Version: 1.0.0
ID: [e-mail]

Name: Follow-on Search Telemetry
Version: 0.9.5
ID: [e-mail]

Name: Form Autofill
Version: 1.0
ID: [e-mail]

Name: Multi-process staged rollout
Version: 3.05
ID: [e-mail]

Name: Photon onboarding
Version: 0.1
ID: [e-mail]

Name: Pocket
Version: 1.0.5
ID: [e-mail]

Name: Presentation
Version: 1.0.0
ID: [e-mail]

Name: Shield Recipe Client
Version: 76
ID: [e-mail]

Name: Web Compat
Version: 1.1
ID: [e-mail]

Name: WebCompat Reporter
Version: 1.0.0
ID: [e-mail]

Extensions
----------

Name: Search Shield Study
Version: 3.0.6
Enabled: true
ID: @unified-urlbar-shield-study-opt-out-new-users

Graphics
--------

Features
Compositing: OpenGL
Asynchronous Pan/Zoom: wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled
WebGL 1 Driver WSI Info: CGL
WebGL 1 Driver Renderer: NVIDIA Corporation -- NVIDIA GeForce GT 650M OpenGL Engine
WebGL 1 Driver Version: 4.1 NVIDIA-10.24.28 355.11.10.10.10.160
WebGL 1 Driver Extensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_depth_bounds_test GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_mirror_clamp GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
WebGL 1 Extensions: 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_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
WebGL 2 Driver WSI Info: CGL
WebGL 2 Driver Renderer: NVIDIA Corporation -- NVIDIA GeForce GT 650M OpenGL Engine
WebGL 2 Driver Version: 4.1 NVIDIA-10.24.28 355.11.10.10.10.160
WebGL 2 Driver Extensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_depth_bounds_test GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_mirror_clamp GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
WebGL 2 Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context
GPU #1
Active: Yes
Vendor ID: 0x8086
Device ID: 0x0166

Diagnostics
AzureCanvasAccelerated: 1
AzureCanvasBackend: skia
AzureContentBackend: skia
AzureFallbackCanvasBackend: none
TileHeight: 1024
TileWidth: 1024
Decision Log
WEBRENDER:
opt-in by default: WebRender is an opt-in feature
OMTP:
disabled by default: Disabled by default
blocked by runtime: OMTP does not yet support tiling




Media
-----

Audio Backend: audiounit
Max Channels: 2
Preferred Channel Layout: stereo
Preferred Sample Rate: 44100
Output Devices
Name: Group
Internal Speakers: AppleHDAEngineOutput:1B,0,1,1:0
Input Devices
Name: Group
Internal Microphone: AppleHDAEngineInput:1B,0,1,0:1

Important Modified Preferences
------------------------------

browser.cache.disk.capacity: 358400
browser.cache.disk.filesystem_reported: 1
browser.cache.disk.smart_size.first_run: false
browser.cache.frecency_experiment: 2
browser.places.smartBookmarksVersion: 8
browser.sessionstore.upgradeBackup.latestBuildID: 20171016220427
browser.startup.homepage_override.buildID: 20171016220427
browser.startup.homepage_override.mstone: 58.0a1
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.matchBuckets:
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.matchBuckets.notset: true
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.matchBucketsSearch:
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.matchBucketsSearch.notset: true
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.maxRichResults: 10
browser.urlbar.experiment.unified-urlbar.mirror.browser.urlbar.maxRichResults.notset: true
browser.urlbar.lastSuggestionsPromptDate: 20171014
browser.urlbar.matchBuckets: general:3,suggestion:3
browser.urlbar.matchBucketsSearch: suggestion:3,general:3
browser.urlbar.maxRichResults: 7
browser.urlbar.timesBeforeHidingSuggestionsHint: 0
dom.forms.autocomplete.formautofill: true
dom.ipc.processCount.web: 4
extensions.lastAppVersion: 58.0a1
font.internaluseonly.changed: false
media.gmp-gmpopenh264.abi: x86_64-gcc3
media.gmp-gmpopenh264.lastUpdate: 1508010740
media.gmp-gmpopenh264.version: 1.6
media.gmp-manager.buildID: 20170926190823
media.gmp-manager.lastCheck: 1508010737
media.gmp-widevinecdm.abi: x86_64-gcc3
media.gmp-widevinecdm.lastUpdate: 1508010743
media.gmp-widevinecdm.version: 1.4.8.1008
media.gmp.storage.version.observed: 1
network.cookie.prefsMigrated: true
places.history.expiration.transient_current_max_pages: 104858
plugin.disable_full_page_plugin_for_types: application/pdf
plugins.ctprollout.cohort: test
plugins.ctprollout.cohortSample: 0.037927
security.sandbox.content.tempDirSuffix: {668c950d-cf71-4b48-83cd-0e9f5913e726}
services.sync.engine.addresses.available: true

Important Locked Preferences
----------------------------

Places Database
---------------

JavaScript
----------

Incremental GC: true

Accessibility
-------------

Activated: false
Prevent Accessibility: 0

Library Versions
----------------

NSPR
Expected minimum version: 4.17
Version in use: 4.17

NSS
Expected minimum version: 3.34 Beta
Version in use: 3.34 Beta

NSSSMIME
Expected minimum version: 3.34 Beta
Version in use: 3.34 Beta

NSSSSL
Expected minimum version: 3.34 Beta
Version in use: 3.34 Beta

NSSUTIL
Expected minimum version: 3.34 Beta
Version in use: 3.34 Beta

Experimental Features
---------------------

Sandbox
-------

Content Process Sandbox Level: 3
Effective Content Process Sandbox Level: 3

Comment 8

[Chris Peterson [:cpeterson]]

Attachment: trailer.mp4

I see a similar pixelated lettering in this trailer mp4 in Firefox 57 and Nightly 59 on macOS 10.13.1. Skip to time 0:26 to see the horizontal artifacts on the "I, TONYA" lettering.

See the attached mp4 saved from this ad link:

https://r5---sn-o097znld.c.2mdn.net/videoplayback/id/9705353938346ce4/itag/15/source/doubleclick/ratebypass/yes/mime/video%2Fmp4/acao/yes/ip/0.0.0.0/ipbits/0/expire/3656531108/sparams/acao,expire,id,ip,ipbits,itag,mime,mip,mm,mn,ms,mv,pl,ratebypass,source/signature/3304092DC41A225A4248BFB55731D230868D9793.8489EE4E837223FB94313C407AF33B4263FAB462/key/cms1/cms_redirect/yes/mip/98.234.194.85/mm/42/mn/sn-o097znld/ms/onc/mt/1512455798/mv/u/pl/21/file/file.mp4

Comment 9

[Alex]

Attachment: Pixelation with YouTube video

This isn't limited to Netflix, I'm seeing the same issue on sites like YouTube as well on my (retina) iMac, with Firefox 61 on macOS 10.13.6.

https://www.youtube.com/watch?v=34UBNNmQowI

This is one of the videos where I can see it pretty clearly, the "Save the World" title text has pretty strong pixelation around the edges, while nearly nothing else in the frame does, it's all relatively smooth.