benhowell · benhowell · Aug 11, 2022 · Aug 7, 2022 · Aug 10, 2022
diff --git a/src/Gallery.js b/src/Gallery.js
@@ -44,20 +44,29 @@ class Gallery extends Component {
 
     componentDidUpdate () {
         if (!this._gallery) return;
-        if (this._gallery.clientWidth
+        if (this.getContainerWidth()
             !== this.state.containerWidth){
             this.onResize();
         }
     }
 
     onResize () {
         if (!this._gallery) return;
+        const containerWidth = this.getContainerWidth();
         this.setState({
-            containerWidth: Math.floor(this._gallery.clientWidth),
-            thumbnails: this.renderThumbs(this._gallery.clientWidth)
+            containerWidth,
+            thumbnails: this.renderThumbs(containerWidth)
         });
     }
 
+    getContainerWidth() {
+        let width = this._gallery.clientWidth;
+        try {
+            width = this._gallery.getBoundingClientRect().width;
+        } catch (err) {}
+        return Math.floor(width);
+    }
+
     openLightbox (index, event) {
         if (event) {
             event.preventDefault();

diff --git a/test/Gallery.e2e.test.js b/test/Gallery.e2e.test.js
@@ -34,13 +34,17 @@ const getGalleryBrowserBuildPath = () => {
 const renderGallery = async (props, options = {}) => {
   const reactVersion = options.reactVersion || 18;
   const timeout = options.timeout || 10000;
+  const styles = options.styles || "";
 
   await page.setContent('<html><div id="root"></div></html>');
   const reactScript = `https://unpkg.com/react@${reactVersion}/umd/react.development.js`;
   await page.addScriptTag({ url: reactScript });
   const reactDOMScript = `https://unpkg.com/react-dom@${reactVersion}/umd/react-dom.development.js`;
   await page.addScriptTag({ url: reactDOMScript });
   await page.addScriptTag({ path: getGalleryBrowserBuildPath() });
+  if (styles) {
+    await page.addStyleTag({ content: styles });
+  }
 
   const latestReactRender = (props) => {
     const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -62,8 +66,8 @@ const renderGallery = async (props, options = {}) => {
 };
 
 describe("Gallery is visually correct", () => {
-  beforeEach(() => {
-    page.setViewport({ width: 800, height: 800 });
+  beforeEach(async () => {
+    await page.setViewport({ width: 800, height: 800 });
   });
 
   it("on react16", async () => {
@@ -178,4 +182,12 @@ describe("Gallery is visually correct", () => {
 
     expect(await page.screenshot()).toMatchImageSnapshot();
   });
+
+  it("when container width is decimal", async () => {
+    const styles = "#root { width: 474.7px }";
+
+    await renderGallery({ images }, { styles });
+
+    expect(await page.screenshot()).toMatchImageSnapshot();
+  });
 });
diff --git a/test/Gallery.test.js b/test/Gallery.test.js
@@ -38,7 +38,7 @@ describe("Gallery Component", () => {
 
     // define clientWidth for gallery root element
     Object.defineProperty(Element.prototype, "clientWidth", { value: 400 });
-
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 400 }));
     // simulate image load event to test react-images loaded state
     global.Image = class Image extends Image {
       constructor() {

diff --git a/...-test-js-gallery-is-visually-correct-when-container-width-is-decimal-1-snap.png b/...-test-js-gallery-is-visually-correct-when-container-width-is-decimal-1-snap.png