Chromium workaround for CSS mask-image bug #7855

cee-chen · 2024-06-25T23:32:31Z

Summary

This bug was originally addressed in #6328 / #6343, but it turns out that it's affecting more components than just EuiModal (at least EuiFlyout as well - see elastic/kibana#180828). The browser-level bug in question is being tracked in https://issues.chromium.org/issues/40778541.

The amazing @kqualters-elastic helped us look into the issue and came up with an excellent workaround. Chromium appears to be not correctly applying a stacking context to mask-images with linear gradients and certain other children/properties. Using transform: translateZ(0) forces that stacking context and fixes the bug.

NOTE: will-change: transform and position: relative also works around the bug, but I deemed them to potentially have outsized side effects compared to translateZ.

Broken	Fixed

QA

Open Chrome or Edge and go to https://eui.elastic.co/pr_7855/#/layout/modal (bug does not affect Firefox or Safari)
Click the Show Modal button
Confirm the modal body content does not have a red overlay
Open your browser devtools and inspect .euiModalBody__overflow
Hide/uncheck the transform: translateZ(0) CSS and confirm that it does have a red overlay without the workaround CSS

General checklist

Revert REVERT ME commit
Browser QA
- Checked in both light and dark modes
- Checked in Chrome, Safari, Edge, and Firefox
  - [ ] Checked in mobile
  ~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA - N/A, CSS only
Code quality checklist - N/A, CSS only
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist - N/A

kqualters-elastic · 2024-06-26T00:11:37Z

might want to do the same on these lines in a scss mixin https://github.com/elastic/eui/blob/main/packages/eui/src/global_styling/mixins/_shadow.scss#L97-#L99

mgadewoll

🚢 🐈‍⬛ Looks good to me! Thanks for digging into this. I can confirm it's fixed in Chrome and Edge 👍

- eventually going to be deprecated, but we can cross that bridge when we get to it

cee-chen · 2024-06-26T15:42:17Z

@kqualters-elastic Fantastic suggestion! I'll add that here as well, but as a heads up, we're looking to deprecate Sass mixins in the future as there isn't an easy way to keep them dynamic to theme changes/customizations compared to CSS-in-JS.

kibanamachine · 2024-06-26T16:08:50Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7855/
Storybook: https://eui.elastic.co/pr_7855/storybook

elasticmachine · 2024-06-26T16:28:38Z

💚 Build Succeeded

Buildkite Build
Commit: 3848243

History

💚 Build #2232 succeeded 49b34a7

cc @cee-chen

asharma-5 · 2024-06-27T07:05:23Z

Hi Team,
we are also facing issue while expanding document from discover tab.
Will this fix work for below issue as well.

cee-chen · 2024-06-27T15:52:12Z

@asharma-5 It will, yes!

asharma-5 · 2024-06-28T03:19:21Z

@cee-chen Thanks for the response.
Getting this same issue in older releases (8.7.0, 8.8.2) too, are we going to backport to older releases?

cee-chen · 2024-06-28T19:42:42Z

@asharma-5 We can if requested, but we typically only do so if there's a specific Kibana team or customer requesting the fix. Please let us know if you would like to make that request!

asharma-5 · 2024-07-01T05:31:05Z

@cee-chen can you please provide the version of Kibana/elasticsearch in which this fix is released.

`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.3.0`](https://github.com/elastic/eui/releases/v95.3.0) - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

cee-chen · 2024-07-22T15:54:41Z

@asharma-5 Sorry for the delay in responding, I was out on PTO. The fix will be in Kibana v8.15.0+.

## Summary Fixes positioning of dragged links in the Links panel editor. The issue was caused by the `transform: translateZ(0)` workaround in EUI to fix a [mask image bug](elastic/eui#7855) in Chromium. We fix this by overriding the `transform` for in the `FlyoutBody` of the Links panel editor. Before: https://github.com/user-attachments/assets/8ad10732-dfaa-4464-845b-0a9c4fc6b173 After: https://github.com/user-attachments/assets/e6f0bffe-7eb0-4590-affc-a89bc86b973d

## Summary Fixes positioning of dragged links in the Links panel editor. The issue was caused by the `transform: translateZ(0)` workaround in EUI to fix a [mask image bug](elastic/eui#7855) in Chromium. We fix this by overriding the `transform` for in the `FlyoutBody` of the Links panel editor. Before: https://github.com/user-attachments/assets/8ad10732-dfaa-4464-845b-0a9c4fc6b173 After: https://github.com/user-attachments/assets/e6f0bffe-7eb0-4590-affc-a89bc86b973d (cherry picked from commit e566abf)

…) (#189129) # Backport This will backport the following commits from `main` to `8.15`: - [[Links] Fix positioning of dragged link in links editor (#189122)](#189122)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nick Peihl <nick.peihl@elastic.co>

asharma-5 · 2024-07-26T05:57:35Z

@cee-chen Thanks for the response, when 8.15.0 will be available ?

cee-chen · 2024-07-26T17:43:58Z

That I'm not sure about, sorry, I don't closely track Elastic's release schedule. It should be sometime soon however.

asharma-5 · 2024-08-06T06:53:26Z

@cee-chen Can you please check internally and provide an tentative date ?

cee-chen · 2024-08-06T15:53:01Z

I am not going to make that information publicly available before Elastic's official announcement, sorry!

asharma-5 · 2024-09-10T07:51:56Z

@cee-chen i have upgraded to 8.15.0 but still seeing the same issue, Is the fix included in 8.15.0 ??

elasticsearch@elasticsearch-0:/opt/elasticsearch/bin$ ./elasticsearch --version
Version: 8.15.0, Build: tar/1a77947f34deddb41af25e6f0ddb8e830159c179/2024-08-05T10:05:34.233336849Z, JVM: 22.0.1

./kibana --version
{"log.level":"info","@timestamp":"2024-09-10T10:41:03.389Z","log.logger":"elastic-apm-node","ecs.version":"8.10.0","agentVersion":"4.7.0","env":{"pid":109,"proctitle":"./../node/glibc-217/bin/node","os":"linux 5.4.0-100-generic","arch":"x64","host":"kibana-0","timezone":"UTC+00","runtime":"Node.js v20.15.1"},"config":{"active":{"source":"start","value":true},"breakdownMetrics":{"source":"start","value":false},"captureBody":{"source":"start","value":"off","commonName":"capture_body"},"captureHeaders":{"source":"start","value":false},"centralConfig":{"source":"start","value":false},"contextPropagationOnly":{"source":"start","value":true},"environment":{"source":"start","value":"production"},"globalLabels":{"source":"start","value":[["git_rev","8aa0b59da12c996e3048d8875446667ee6e15c7f"]],"sourceValue":{"git_rev":"8aa0b59da12c996e3048d8875446667ee6e15c7f"}},"logLevel":{"source":"default","value":"info","commonName":"log_level"},"metricsInterval":{"source":"start","value":120,"sourceValue":"120s"},"serverUrl":{"source":"start","value":"https://kibana-cloud-apm.apm.us-east-1.aws.found.io/","commonName":"server_url"},"transactionSampleRate":{"source":"start","value":0.1,"commonName":"transaction_sample_rate"},"captureSpanStackTraces":{"source":"start","sourceValue":false},"secretToken":{"source":"start","value":"[REDACTED]","commonName":"secret_token"},"serviceName":{"source":"start","value":"kibana","commonName":"service_name"},"serviceVersion":{"source":"start","value":"8.15.0","commonName":"service_version"}},"activationMethod":"require","message":"Elastic APM Node.js Agent v4.7.0"}
8.15.0

can you please help
cc @tkajtoch

cee-chen · 2024-09-12T18:55:21Z

Ah, it looks like Tomasz missed the feature freeze cutoff for 8.15 in elastic/kibana#187342 by a few days, and unfortunately the backport:skip label was added to the PR which prevented it from being automatically backported to the 8.15 branch. I'll manually kick off a backport here in a bit, and the fix will make it into Kibana v8.15.2.

Thank you for your patience on this @asharma-5. As a heads up, this bug only affects Chrome, so temporarily switching to the Firefox or Safari browser will resolve the issue.

`v95.2.0`⏩`v95.3.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- - Updated `EuiThemeProvider`s to allow modifying/setting custom `breakpoint`s in nested usage (as opposed to only at the top `EuiProvider` level) ([elastic#7862](elastic/eui#7862)) **Bug fixes** - Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties ([elastic#7855](elastic/eui#7855)) **CSS-in-JS conversions** - Converted `EuiColorPicker` to Emotion; Removed `$euiColorPickerWidth` ([elastic#7845](elastic/eui#7845)) - Converted `EuiColorPickerSwatch` to Emotion ([elastic#7853](elastic/eui#7853)) - Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion ([elastic#7854](elastic/eui#7854)) - Removed `$euiColorPaletteDisplaySizes` - Removed `@mixin euiColorPaletteInnerBorder` - Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`, `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize` ([elastic#7859](elastic/eui#7859)) **Accessibility** - Updated the `aria-label` attribute for the `EuiFilePicker` remove file button ([elastic#7860](elastic/eui#7860)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Backport This is a manual backport of EUI v95.3.0 (#187342) which was intended to target 8.15 but was missed due to the `backport:skip` label. The release contains a requested visual bugfix for Chromium users: elastic/eui#7855 (comment) Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

asharma-5 · 2024-09-16T05:53:55Z

@cee-chen Thanks for the response.

cee-chen added 4 commits June 25, 2024 16:20

Add a stacking context workaround to our scroll shadow masks

6773d01

Restore modal overflow hidden

3997a43

[REVERT ME] Modal repro example

a45535d

changelog

49b34a7

cee-chen changed the title ~~Chromium workaround for mask-image CSS bug~~ Chromium workaround for CSS mask-image bug Jun 25, 2024

cee-chen marked this pull request as ready for review June 25, 2024 23:44

cee-chen requested a review from a team as a code owner June 25, 2024 23:44

mgadewoll approved these changes Jun 26, 2024

View reviewed changes

[PR feedback] Update Sass mixin as well

3848243

- eventually going to be deprecated, but we can cross that bridge when we get to it

cee-chen enabled auto-merge (squash) June 26, 2024 15:42

cee-chen self-assigned this Jun 26, 2024

cee-chen merged commit b1370af into elastic:main Jun 26, 2024
5 checks passed

cee-chen deleted the overflow-shadow-mask-chromium-workaround branch June 26, 2024 16:28

tkajtoch mentioned this pull request Jul 2, 2024

Upgrade EUI to v95.3.0 elastic/kibana#187342

Merged

nickpeihl mentioned this pull request Jul 24, 2024

[Links] Fix positioning of dragged link in links editor elastic/kibana#189122

Merged

cee-chen mentioned this pull request Sep 12, 2024

[8.15] Upgrade EUI to v95.3.0 (#187342) elastic/kibana#192764

Merged

cee-chen mentioned this pull request Sep 24, 2024

Drag Drop not work inside the Flyout and Modal #8027

Closed

LunaticoCR mentioned this pull request Sep 24, 2024

CSS mask-image bug introduced with last update brave/brave-browser#41230

Open

6 tasks

kertal mentioned this pull request Oct 3, 2024

red overlay while expanding doc in discover tab.. kibana/es version 8.15.0 elastic/kibana#192537

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chromium workaround for CSS mask-image bug #7855

Chromium workaround for CSS mask-image bug #7855

cee-chen commented Jun 25, 2024 •

edited

Loading

kqualters-elastic commented Jun 26, 2024

mgadewoll left a comment

cee-chen commented Jun 26, 2024

kibanamachine commented Jun 26, 2024

elasticmachine commented Jun 26, 2024

asharma-5 commented Jun 27, 2024

cee-chen commented Jun 27, 2024

asharma-5 commented Jun 28, 2024

cee-chen commented Jun 28, 2024

asharma-5 commented Jul 1, 2024 •

edited

Loading

cee-chen commented Jul 22, 2024

asharma-5 commented Jul 26, 2024 •

edited

Loading

cee-chen commented Jul 26, 2024

asharma-5 commented Aug 6, 2024

cee-chen commented Aug 6, 2024

asharma-5 commented Sep 10, 2024 •

edited

Loading

cee-chen commented Sep 12, 2024 •

edited

Loading

asharma-5 commented Sep 16, 2024

Chromium workaround for CSS mask-image bug #7855

Chromium workaround for CSS mask-image bug #7855

Conversation

cee-chen commented Jun 25, 2024 • edited Loading

Summary

QA

General checklist

kqualters-elastic commented Jun 26, 2024

mgadewoll left a comment

Choose a reason for hiding this comment

cee-chen commented Jun 26, 2024

kibanamachine commented Jun 26, 2024

elasticmachine commented Jun 26, 2024

💚 Build Succeeded

History

asharma-5 commented Jun 27, 2024

cee-chen commented Jun 27, 2024

asharma-5 commented Jun 28, 2024

cee-chen commented Jun 28, 2024

asharma-5 commented Jul 1, 2024 • edited Loading

cee-chen commented Jul 22, 2024

asharma-5 commented Jul 26, 2024 • edited Loading

cee-chen commented Jul 26, 2024

asharma-5 commented Aug 6, 2024

cee-chen commented Aug 6, 2024

asharma-5 commented Sep 10, 2024 • edited Loading

cee-chen commented Sep 12, 2024 • edited Loading

asharma-5 commented Sep 16, 2024

cee-chen commented Jun 25, 2024 •

edited

Loading

asharma-5 commented Jul 1, 2024 •

edited

Loading

asharma-5 commented Jul 26, 2024 •

edited

Loading

asharma-5 commented Sep 10, 2024 •

edited

Loading

cee-chen commented Sep 12, 2024 •

edited

Loading