fix: updates column css values for Chrome behaviour

triplecanopy · Sep 13, 2022 · 75bc577 · 75bc577
1 parent 4612573
commit 75bc577
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/packages/b-ber-reader-react/src/constants/index.js b/packages/b-ber-reader-react/src/constants/index.js
@@ -25,6 +25,11 @@ export const MEDIA_CONTROLS_PRESETS = new Set(['simple', 'normal', 'full'])
 
 export const layouts = { SCROLL: 'scroll', COLUMNS: 'columns' }
 
+// CSS declarations for columns on Layout container. 'auto auto' is required
+// instead of 1, 1 auto, etc as numeric values tend to break the layout on
+// Chrome when using 'layout: scroll' in the project config
+export const columns = { ONE: 'auto auto', TWO: '2 auto' }
+
 // Enforce a single column scrolling layout on awkward screen sizes
 export const MEDIA_QUERY_MIN_SCROLLING_ASPECT_RATIO = 'only screen and (min-aspect-ratio: 13 / 5)'
 
@@ -53,7 +58,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '100%',
       maxHeight: 'auto',
       columnGap: '45px',
-      columns: 1,
+      columns: columns.ONE,
       paddingLeft: '15px',
       paddingRight: '15px',
       paddingTop: '15px',
@@ -67,7 +72,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '738px',
       maxHeight: 'auto',
       columnGap: '45px',
-      columns: 1,
+      columns: columns.ONE,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: '15px',
@@ -81,7 +86,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '900px',
       maxHeight: '500px',
       columnGap: '45px',
-      columns: 2,
+      columns: columns.TWO,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: 0,
@@ -95,7 +100,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '1080px',
       maxHeight: '600px',
       columnGap: '65px',
-      columns: 2,
+      columns: columns.TWO,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: 0,
@@ -109,7 +114,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '1280px',
       maxHeight: '675px',
       columnGap: '80px',
-      columns: 2,
+      columns: columns.TWO,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: 0,
@@ -123,7 +128,7 @@ export const horizontalBreakpoints = new Map([
       maxWidth: '1680px',
       maxHeight: '880px',
       columnGap: '125px',
-      columns: 2,
+      columns: columns.TWO,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: 0,
@@ -132,3 +137,4 @@ export const horizontalBreakpoints = new Map([
     },
   ],
 ])
+
diff --git a/packages/b-ber-reader-react/src/helpers/Viewport.js b/packages/b-ber-reader-react/src/helpers/Viewport.js
@@ -6,6 +6,7 @@ import {
   MEDIA_QUERY_MOBILE,
   MEDIA_QUERY_TABLET,
   MEDIA_QUERY_DESKTOP,
+  columns,
 } from '../constants'
 
 class Viewport {
@@ -25,8 +26,7 @@ class Viewport {
     const { css } = Viewport.getCss()
 
     return (
-      parseInt(css.columns, 10) === 1 ||
-      Viewport.isMinimumScrollingAspectRatio()
+      css.columns === columns.ONE || Viewport.isMinimumScrollingAspectRatio()
     )
   }
 
@@ -114,7 +114,7 @@ class Viewport {
       maxWidth,
       maxHeight,
       columnGap,
-      columns,
+      columns: cssColumns,
       paddingLeft,
       paddingRight,
       paddingTop,
@@ -132,7 +132,7 @@ class Viewport {
       paddingBottom: verticalPadding + parseInt(paddingBottom, 10),
       columnGap: parseInt(columnGap, 10),
       fontSize,
-      columns,
+      columns: cssColumns,
     }
 
     return styles

diff --git a/packages/b-ber-reader-react/src/lib/with-dimensions.jsx b/packages/b-ber-reader-react/src/lib/with-dimensions.jsx
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 import Viewport from '../helpers/Viewport'
 import { isNumeric } from '../helpers/Types'
 import * as viewerSettingsActions from '../actions/viewer-settings'
+import { columns } from '../constants'
 
 const withDimensions = WrappedComponent => {
   class WrapperComponent extends React.Component {
@@ -44,9 +45,13 @@ const withDimensions = WrappedComponent => {
       const scrollingLayout = Viewport.isVerticallyScrolling(this.props)
       const width = this.getWidth(scrollingLayout)
       const height = scrollingLayout ? 'auto' : window.innerHeight
-      const columns = scrollingLayout ? 1 : 2
+      const nextColumns = scrollingLayout ? columns.ONE : columns.TWO
 
-      this.props.viewerSettingsActions.update({ width, height, columns })
+      this.props.viewerSettingsActions.update({
+        width,
+        height,
+        columns: nextColumns,
+      })
     }
 
     getFrameHeight() {

diff --git a/packages/b-ber-reader-react/src/models/ViewerSettings.js b/packages/b-ber-reader-react/src/models/ViewerSettings.js
@@ -1,7 +1,7 @@
 import isPlainObject from 'lodash/isPlainObject'
 import has from 'lodash/has'
 import { isNumeric } from '../helpers/Types'
-import { transitions, themes } from '../constants'
+import { transitions, themes, columns } from '../constants'
 import Viewport from '../helpers/Viewport'
 
 const extendExistingProps = (target, ref, obj, opts = { enumerable: true }) => {
@@ -40,7 +40,7 @@ class ViewerSettings {
     theme: themes.DEFAULT,
     transition: transitions.SLIDE,
     transitionSpeed: 400,
-    columns: 2,
+    columns: columns.TWO,
 
     fontSize: () => Viewport.styles().fontSize,
     columnGap: () => Viewport.styles().columnGap,