diff --git a/packages/eui/changelogs/upcoming/7855.md b/packages/eui/changelogs/upcoming/7855.md
new file mode 100644
index 00000000000..975e96edc75
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7855.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a Chrome/Edge CSS `mask-image` bug that was affecting scroll overflow shadow utilties
diff --git a/packages/eui/src-docs/src/views/modal/modal.tsx b/packages/eui/src-docs/src/views/modal/modal.tsx
index b59de46465d..b8016ed37be 100644
--- a/packages/eui/src-docs/src/views/modal/modal.tsx
+++ b/packages/eui/src-docs/src/views/modal/modal.tsx
@@ -4,63 +4,164 @@ import {
EuiButton,
EuiModal,
EuiModalBody,
- EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
- EuiCodeBlock,
- EuiSpacer,
- useGeneratedHtmlId,
-} from '../../../../src';
+ EuiHealth,
+ EuiLink,
+ EuiInMemoryTable,
+} from '../../../../src/components';
-export default () => {
- const [isModalVisible, setIsModalVisible] = useState(false);
+import _times from 'lodash/times';
- const closeModal = () => setIsModalVisible(false);
- const showModal = () => setIsModalVisible(true);
+const firstNames = [
+ 'Very long first name that will wrap or be truncated',
+ 'Another very long first name which will wrap or be truncated',
+ 'Clinton',
+ 'Igor',
+ undefined,
+ 'Drew',
+ null,
+ 'Rashid',
+ undefined,
+ 'John',
+];
+
+const lastNames = [
+ 'Very long last name that will wrap or be truncated',
+ 'Another very long last name which will wrap or be truncated',
+ 'Gormley',
+ 'Motov',
+ 'Minarik',
+ 'Raines',
+ 'Král',
+ 'Khan',
+ 'Sissel',
+ 'Dorlus',
+];
- const modalTitleId = useGeneratedHtmlId();
+const github = [
+ 'martijnvg',
+ 'elissaw',
+ 'clintongormley',
+ 'imotov',
+ 'karmi',
+ 'drewr',
+ 'HonzaKral',
+ 'rashidkpc',
+ 'jordansissel',
+ 'silne30',
+];
+
+const createUsers = () => {
+ return _times(20, (index) => {
+ return {
+ id: index,
+ firstName: index < 10 ? firstNames[index] : firstNames[index - 10],
+ lastName: index < 10 ? lastNames[index] : lastNames[index - 10],
+ github: index < 10 ? github[index] : github[index - 10],
+ dateOfBirth: new Date(
+ 1980,
+ Math.floor(Math.random() * 12),
+ Math.floor(Math.random() * 27) + 1
+ ),
+ nationality: 'nationality',
+ online: index % 2 === 0,
+ };
+ });
+};
+
+export const Table = () => {
+ const columns = [
+ {
+ field: 'firstName',
+ name: 'First Name',
+ sortable: true,
+ truncateText: true,
+ },
+ {
+ field: 'lastName',
+ name: 'Last Name',
+ truncateText: true,
+ },
+ {
+ field: 'github',
+ name: 'Github',
+ render: (username: string) => (
+ <EuiLink href={`https://github.com/${username}`} target="_blank">
+ {username}
+ </EuiLink>
+ ),
+ },
+ {
+ field: 'dateOfBirth',
+ name: 'Date of Birth',
+ dataType: 'string',
+ render: () => `hello`,
+ sortable: true,
+ },
+ {
+ field: 'nationality',
+ name: 'Nationality',
+ },
+ {
+ field: 'online',
+ name: 'Online',
+ dataType: 'boolean',
+ render: (online: boolean) => {
+ const color = online ? 'success' : 'danger';
+ const label = online ? 'Online' : 'Offline';
+ return <EuiHealth color={color}>{label}</EuiHealth>;
+ },
+ sortable: true,
+ },
+ ];
+
+ const sorting = {
+ sort: {
+ field: 'dateOfBirth',
+ direction: 'desc',
+ },
+ } as const;
return (
- <>
- <EuiButton onClick={showModal}>Show modal</EuiButton>
+ <EuiInMemoryTable
+ tableCaption="Demo of EuiInMemoryTable"
+ items={createUsers()}
+ columns={columns as any}
+ pagination={true}
+ sorting={sorting}
+ />
+ );
+};
- {isModalVisible && (
- <EuiModal aria-labelledby={modalTitleId} onClose={closeModal}>
- <EuiModalHeader>
- <EuiModalHeaderTitle id={modalTitleId}>
- Modal title
- </EuiModalHeaderTitle>
- </EuiModalHeader>
+export default () => {
+ const [isModalVisible, setIsModalVisible] = useState(false);
- <EuiModalBody>
- This modal has the following setup:
- <EuiSpacer />
- <EuiCodeBlock language="html" isCopyable>
- {`<EuiModal aria-labelledby={titleId} onClose={closeModal}>
- <EuiModalHeader>
- <EuiModalHeaderTitle title={titleId}><!-- Modal title --></EuiModalHeaderTitle>
- </EuiModalHeader>
+ const closeModal = () => setIsModalVisible(false);
+ const showModal = () => setIsModalVisible(true);
+
+ let modal;
- <EuiModalBody>
- <!-- Modal body -->
- </EuiModalBody>
+ if (isModalVisible) {
+ modal = (
+ <EuiModal onClose={closeModal}>
+ <EuiModalHeader>
+ <EuiModalHeaderTitle>
+ <h1>title</h1>
+ </EuiModalHeaderTitle>
+ </EuiModalHeader>
- <EuiModalFooter>
- <EuiButton onClick={closeModal} fill>
- Close
- </EuiButton>
- </EuiModalFooter>
-</EuiModal>`}
- </EuiCodeBlock>
- </EuiModalBody>
+ <EuiModalBody>
+ <Table />
+ </EuiModalBody>
+ </EuiModal>
+ );
+ }
- <EuiModalFooter>
- <EuiButton onClick={closeModal} fill>
- Close
- </EuiButton>
- </EuiModalFooter>
- </EuiModal>
- )}
- </>
+ return (
+ <div>
+ <EuiButton onClick={showModal}>Show modal</EuiButton>
+ {modal}
+ </div>
);
};
diff --git a/packages/eui/src/components/modal/modal.styles.ts b/packages/eui/src/components/modal/modal.styles.ts
index 55f5bac244a..2ae5e768fff 100644
--- a/packages/eui/src/components/modal/modal.styles.ts
+++ b/packages/eui/src/components/modal/modal.styles.ts
@@ -31,8 +31,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
z-index: ${euiTheme.levels.modal};
min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
max-inline-size: calc(100vw - ${euiTheme.size.base});
- /* TODO: Consider restoring this once https://bugs.chromium.org/p/chromium/issues/detail?id=1229700 is resolved */
- /* overflow: hidden; Ensure long, non-breaking text doesn't expand beyond the modal bounds */
+ overflow: hidden; /* Ensure long, non-breaking text doesn't expand beyond the modal bounds */
${euiCanAnimate} {
animation: ${euiAnimSlideInUp(euiTheme.size.xxl)}
diff --git a/packages/eui/src/global_styling/mixins/_helpers.ts b/packages/eui/src/global_styling/mixins/_helpers.ts
index 72ffdb6f472..48f70e58744 100644
--- a/packages/eui/src/global_styling/mixins/_helpers.ts
+++ b/packages/eui/src/global_styling/mixins/_helpers.ts
@@ -113,10 +113,18 @@ const euiOverflowShadowStyles = (
}
}
+ // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+ // This workaround forces a stacking context on the scrolling container, which
+ // hopefully addresses the bug. @see:
+ // - https://issues.chromium.org/issues/40778541
+ // - https://github.com/elastic/kibana/issues/180828
+ // - https://github.com/elastic/eui/pull/6343#issuecomment-1302732021
+ const chromiumMaskWorkaround = 'transform: translateZ(0);';
+
if (direction === 'y') {
- return `mask-image: linear-gradient(to bottom, ${gradient});`;
+ return `mask-image: linear-gradient(to bottom, ${gradient}); ${chromiumMaskWorkaround}`;
} else {
- return `mask-image: linear-gradient(to right, ${gradient});`;
+ return `mask-image: linear-gradient(to right, ${gradient}); ${chromiumMaskWorkaround}`;
}
};
diff --git a/packages/eui/src/global_styling/mixins/_shadow.scss b/packages/eui/src/global_styling/mixins/_shadow.scss
index b483a49af42..1bc64eb085b 100644
--- a/packages/eui/src/global_styling/mixins/_shadow.scss
+++ b/packages/eui/src/global_styling/mixins/_shadow.scss
@@ -100,4 +100,9 @@
} @else {
@warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
}
+
+ // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+ // This workaround forces a stacking context on the scrolling container, which
+ // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
+ transform: translateZ(0);
}
diff --git a/packages/eui/src/global_styling/utility/__snapshots__/utility.test.ts.snap b/packages/eui/src/global_styling/utility/__snapshots__/utility.test.ts.snap
index a8a135b1343..e6885d49f61 100644
--- a/packages/eui/src/global_styling/utility/__snapshots__/utility.test.ts.snap
+++ b/packages/eui/src/global_styling/utility/__snapshots__/utility.test.ts.snap
@@ -182,7 +182,7 @@ exports[`global utility styles generates static global styles 1`] = `
,
rgb(255,0,0) calc(100% - 8px),
rgba(255,0,0,0.1) 100%
- );
+ ); transform: translateZ(0);
;}
.eui-xScrollWithShadows{
@@ -221,7 +221,7 @@ exports[`global utility styles generates static global styles 1`] = `
,
rgb(255,0,0) calc(100% - 8px),
rgba(255,0,0,0.1) 100%
- );
+ ); transform: translateZ(0);
;}[class*='eui-showFor']{display:none!important;}
.eui-hideFor--xl {
@media only screen and (min-width: 1200px) {