fix(gatsby-plugin-image): Add overflow hidden back to wrapper CSS (#2…

…8410) * Add overflow hidden back to wrapper CSS * update tests * Update packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx * Update packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
gatsbyjs · Dec 1, 2020 · 2b62f38 · 2b62f38
1 parent 7577e3f
commit 2b62f38
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -62,12 +62,15 @@ describe(`GatsbyImage server`, () => {
       expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
         CSSStyleDeclaration {
           "0": "position",
+          "1": "overflow",
           "_importants": Object {
+            "overflow": undefined,
             "position": undefined,
           },
-          "_length": 1,
+          "_length": 2,
           "_onChange": [Function],
           "_values": Object {
+            "overflow": "hidden",
             "position": "relative",
           },
         }
@@ -95,17 +98,20 @@ describe(`GatsbyImage server`, () => {
       expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
         CSSStyleDeclaration {
           "0": "position",
-          "1": "width",
-          "2": "height",
+          "1": "overflow",
+          "2": "width",
+          "3": "height",
           "_importants": Object {
             "height": undefined,
+            "overflow": undefined,
             "position": undefined,
             "width": undefined,
           },
-          "_length": 3,
+          "_length": 4,
           "_onChange": [Function],
           "_values": Object {
             "height": "100px",
+            "overflow": "hidden",
             "position": "relative",
             "width": "100px",
           },
@@ -134,15 +140,18 @@ describe(`GatsbyImage server`, () => {
       expect((wrapper as HTMLElement).style).toMatchInlineSnapshot(`
         CSSStyleDeclaration {
           "0": "position",
-          "1": "display",
+          "1": "overflow",
+          "2": "display",
           "_importants": Object {
             "display": undefined,
+            "overflow": undefined,
             "position": undefined,
           },
-          "_length": 2,
+          "_length": 3,
           "_onChange": [Function],
           "_values": Object {
             "display": "inline-block",
+            "overflow": "hidden",
             "position": "relative",
           },
         }

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -52,6 +52,7 @@ export function getWrapperProps(
 } {
   const wrapperStyle: CSSProperties = {
     position: `relative`,
+    overflow: `hidden`,
   }
 
   if (layout === `fixed`) {