X
點擊此處開啟此網站的行動版。

技術支援討論區

Why are background gradients oversaturated?

已張貼

I noticed that on my new computer, backgrounds created in CSS with the background-image property are oversaturated.

In the example, there's a square with a background color that is the same as the start and end colors of the gradient of the body element behind it.

On my screen, the background is more saturated than the square. This does not happen in Chrome or Safari, where everything looks like the less saturated square.

What I've tried so far:

Checked with the same Firefox version on my MacBook. The background color gradient was rendered the same as the solid background (however more saturated than in Safari and Photoshop).

Disable hardware acceleration. This had no effect.

Restart Firefox in safe mode. This had no effect.

Enter a value for gfx.color_management.display_profile: the path to the color profile that my iMac shows in ColorSync Utility>Profiles>Computer>Displays>iMac. This had no effect.

Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2.

Interestingly, one could argue Chrome and Safari render the colors undersaturated, because when I create the color in another program, it looks identical to the rendering in Firefox. However, I would assume it would be beneficial to have color management activated and in that case, the background gradient should not look different.

I have attached an image that shows the effect on my display.

How can I get internally consistent color rendering with Firefox color management enabled?

I noticed that on my new computer, backgrounds created in CSS with the background-image property are oversaturated. In the example, there's a square with a background color that is the same as the start and end colors of the gradient of the body element behind it. On my screen, the background is more saturated than the square. This does not happen in Chrome or Safari, where everything looks like the less saturated square. What I've tried so far: Checked with the same Firefox version on my MacBook. The background color gradient was rendered the same as the solid background (however more saturated than in Safari and Photoshop). Disable hardware acceleration. This had no effect. Restart Firefox in safe mode. This had no effect. Enter a value for gfx.color_management.display_profile: the path to the color profile that my iMac shows in ColorSync Utility>Profiles>Computer>Displays>iMac. This had no effect. Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2. Interestingly, one could argue Chrome and Safari render the colors undersaturated, because when I create the color in another program, it looks identical to the rendering in Firefox. However, I would assume it would be beneficial to have color management activated and in that case, the background gradient should not look different. I have attached an image that shows the effect on my display. How can I get internally consistent color rendering with Firefox color management enabled?

由 Geelman 於 修改

被選擇的解決方法

Okay, that helps me understand. So, when you have color management enabled, the background-color in Safari and Firefox, and linear-gradient in Safari match, and the linear-gradient in Firefox is the odd man out. I've attached an annotated excerpt from your screenshot.

This seems to be covered by a bug filed nearly exactly 5 years ago for gradient filles, and related to another one filed more recently:

I'm not seeing progress there, so it may stay broken for quite a while yet.

從原來的回覆中察看解決方案 1

額外的系統細節

應用程式

  • Firefox 60.0.1
  • 使用者代理:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:60.0) Gecko/20100101 Firefox/60.0
  • 技術支援網址:https://support.mozilla.org/1/firefox/60.0.1/Darwin/nl/

擴充套件

  • Firefox Multi-Account Containers 6.0.0 (@testpilot-containers)
  • LastPass: Free Password Manager 4.10.1.0 (support@lastpass.com)
  • TrackMeNot 0.10.3 (trackmenot@mrl.nyu.edu)
  • uBlock Origin 1.16.8 (uBlock0@raymondhill.net)
  • Vue.js devtools 4.1.4 ({5caff8cc-3d2e-4110-a88a-003cc85b3858})
  • Marker.io: Screenshot for Trello/Jira/Slack/… 5.2.3 ({85ea4a83-14e0-47c3-a337-b493046463d1}) (Inactive)
  • Zoom Page WE 10.5 (zoompage-we@DW-dev) (Inactive)

JavaScript

  • incrementalGCEnabled: True

圖形

  • adapterDescription:
  • adapterDeviceID: 0x67df
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x1002
  • crashGuards: []
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'name': u'HW_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'available', u'description': u'OpenGL Compositing', u'name': u'OPENGL_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'unavailable', u'description': u'WebRender', u'name': u'WEBRENDER', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}]}, {u'status': u'available', u'description': u'Off Main Thread Painting', u'name': u'OMTP', u'log': [{u'status': u'available', u'type': u'default'}]}]}
  • info: {u'TileHeight': 1024, u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'ApzAutoscrollInput': 1, u'AzureFallbackCanvasBackend': u'none', u'TileWidth': 1024, u'AzureCanvasAccelerated': 1, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: True
  • offMainThreadPaintWorkerCount: 3
  • usesTiling: True
  • webgl1DriverExtensions: 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_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
  • 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_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context
  • webgl1Renderer: ATI Technologies Inc. -- AMD Radeon Pro 570 OpenGL Engine
  • webgl1Version: 4.1 ATI-1.66.42
  • webgl1WSIInfo: CGL
  • webgl2DriverExtensions: 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_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
  • webgl2Extensions: 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
  • webgl2Renderer: ATI Technologies Inc. -- AMD Radeon Pro 570 OpenGL Engine
  • webgl2Version: 4.1 ATI-1.66.42
  • webgl2WSIInfo: CGL
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL
  • windowUsingAdvancedLayers: False

修改過的偏好設定

其他

  • User JS: 否
  • 輔助功能: 否
Shadow110 1072 個解決方法 14836 個答案

Hi, Firefox likes up to date Video Card Drivers with no errors for one. Not that I see errors in yours but there is no date showing.

The other thing is Firefox loves great coding and will not let things slide by as other browsers do, which according to W3C they are not suppose to. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules.

So check your code : HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/

Please let us know if this solved your issue or if need further assistance.

Hi, Firefox likes up to date Video Card Drivers with no errors for one. Not that I see errors in yours but there is no date showing. The other thing is Firefox loves great coding and will not let things slide by as other browsers do, which according to W3C they are not suppose to. W3C.org (World Wide Web Consortium) in charge of standards and practices and future development of web pages and web browsers make the rules on code. Mozilla Firefox follows these rules. So check your code : HTML https://validator.w3.org/ CSS https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/i18n-checker/ and http://mobile.css-validator.org/ Please let us know if this solved your issue or if need further assistance.
jscher2000
  • Top 10 Contributor
8880 個解決方法 72662 個答案

Geelman said

Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2.

It sounds as though Firefox is not compatible with your monitor profile for some reason, since the problem occurs when an image is eligible for color management. Perhaps it is not supported, or perhaps the settings in Firefox aren't quite right.

This thread discusses all of Firefox's color management settings and behavior that I know about: Colors inconsistent/inaccurate.

''Geelman [[#question-1220819|said]]'' <blockquote>Change gfx.color_management.mode from 1 to 0 and restart Firefox. All yellow on the linked page looks more saturated than in Chrome and Safari, but the background gradient is rendered in the same color as the div with the solid background. The same happened after changing the setting to 2.</blockquote> It sounds as though Firefox is not compatible with your monitor profile for some reason, since the problem occurs when an image is eligible for color management. Perhaps it is not supported, or perhaps the settings in Firefox aren't quite right. This thread discusses all of Firefox's color management settings and behavior that I know about: [https://support.mozilla.org/questions/1171999 Colors inconsistent/inaccurate].

提出問題者

I should emphasize that the problem occurs with CSS background gradients rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed!

I see that the image was not uploaded with my question. I'll try to attach it with this one. The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated.

I should emphasize that the problem occurs with '''CSS background gradients''' rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed! I see that the image was not uploaded with my question. I'll try to attach it with this one. The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated.

提出問題者

Pkshadow said

Hi, Firefox likes up to date Video Card Drivers with no errors for one.

I have the latest drivers that Apple provided with macOS High Sierra 10.13.5.

So check your code

Thanks for pointing out though that maybe there was the mistake, so I checked it using the links you provided. The code is fine.

''Pkshadow [[#answer-1119885|said]]'' <blockquote> Hi, Firefox likes up to date Video Card Drivers with no errors for one. </blockquote> I have the latest drivers that Apple provided with macOS High Sierra 10.13.5. <blockquote> So check your code </blockquote> Thanks for pointing out though that maybe there was the mistake, so I checked it using the links you provided. The code is fine.
jscher2000
  • Top 10 Contributor
8880 個解決方法 72662 個答案

Geelman said

I should emphasize that the problem occurs with CSS background gradients rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed!

Perhaps there is a unique color management problem with linear-gradient. ???

The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated.

I'm not sure I understand this image. The square seems to have a thick border and a different color in the center. I'm viewing the image on a non-profiled Win7 LCD panel, so not the best case scenario for color fidelity...

''Geelman [[#answer-1120024|said]]'' <blockquote> I should emphasize that the problem occurs with '''CSS background gradients''' rendered by the browser. The issue does not present itself with JPG images that may or may not be color managed!</blockquote> Perhaps there is a unique color management problem with linear-gradient. ??? <blockquote> The image shows: At the left: the test page rendered in safari At the right: the test page rendered in Firefox, with the square having a less saturated (probably correct) color and the background more saturated. </blockquote> I'm not sure I understand this image. The square seems to have a thick border and a different color in the center. ''I'm viewing the image on a non-profiled Win7 LCD panel, so not the best case scenario for color fidelity...''

提出問題者

jscher2000 said

I'm not sure I understand this image.

Sorry, I should have made clear that the border and drop shadow are Firefox window as macOS shows it. The left window, underneath the shadow, is Safari's. At the right it's Firefox. As you may be able to see, the square has a less saturated color whereas it has the same hex code as the start and end color of the gradient behind it.

''jscher2000 [[#answer-1120108|said]]'' <blockquote> I'm not sure I understand this image. </blockquote> Sorry, I should have made clear that the border and drop shadow are Firefox window as macOS shows it. The left window, underneath the shadow, is Safari's. At the right it's Firefox. As you may be able to see, the square has a less saturated color whereas it has the same hex code as the start and end color of the gradient behind it.
jscher2000
  • Top 10 Contributor
8880 個解決方法 72662 個答案

選擇的解決方法

Okay, that helps me understand. So, when you have color management enabled, the background-color in Safari and Firefox, and linear-gradient in Safari match, and the linear-gradient in Firefox is the odd man out. I've attached an annotated excerpt from your screenshot.

This seems to be covered by a bug filed nearly exactly 5 years ago for gradient filles, and related to another one filed more recently:

I'm not seeing progress there, so it may stay broken for quite a while yet.

Okay, that helps me understand. So, when you have color management enabled, the background-color in Safari and Firefox, and linear-gradient in Safari match, and the linear-gradient in Firefox is the odd man out. I've attached an annotated excerpt from your screenshot. <img src="https://prod-cdn.sumo.mozilla.net/uploads/images/2018-06-07-12-22-05-165d69.png" width="500"> This seems to be covered by a bug filed nearly exactly 5 years ago for gradient filles, and related to another one filed more recently: * [https://bugzilla.mozilla.org/show_bug.cgi?id=880271 Bug 880271 - Inconsistent color management] * [https://bugzilla.mozilla.org/show_bug.cgi?id=1453262 Bug 1453262 - lineargradient in canvas renders to full monitor color gamut instead of limiting to sRGB as specified by color management settings] * About Bugzilla: ** [https://bugzilla.mozilla.org/page.cgi?id=etiquette.html Bugzilla Etiquette] ** [https://bugzilla.mozilla.org/page.cgi?id=voting.html Voting] I'm not seeing progress there, so it may stay broken for quite a while yet.

提出問題者

Thank you jscher, for the solid overview of the problem in your answer. I guess I'm just among the lucky few with a display with a gamut wide enough to let the bug present itself.

Thank you jscher, for the solid overview of the problem in your answer. I guess I'm just among the lucky few with a display with a gamut wide enough to let the bug present itself.