diff --git a/src/components/Options/style.scss b/src/components/Options/style.scss index 3ec68295..34143e12 100644 --- a/src/components/Options/style.scss +++ b/src/components/Options/style.scss @@ -54,4 +54,5 @@ $horizontalPadding: 15px; .options-scroller { overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; } diff --git a/src/components/Output/index.tsx b/src/components/Output/index.tsx index 5a80939b..a78d01e1 100644 --- a/src/components/Output/index.tsx +++ b/src/components/Output/index.tsx @@ -177,6 +177,17 @@ export default class Output extends Component { const clonedEvent = new (event.constructor as typeof Event)(event.type, event); this.retargetedEvents.add(clonedEvent); this.pinchZoomLeft.dispatchEvent(clonedEvent); + + // Unfocus any active element on touchend. This fixes an issue on (at least) Android Chrome, + // where the software keyboard is hidden, but the input remains focused, then after interaction + // with this element the keyboard reappears for NO GOOD REASON. Thanks Android. + if ( + event.type === 'touchend' && + document.activeElement && + document.activeElement instanceof HTMLElement + ) { + document.activeElement.blur(); + } } render( diff --git a/src/components/compress/style.scss b/src/components/compress/style.scss index 6956af3c..a292c58f 100644 --- a/src/components/compress/style.scss +++ b/src/components/compress/style.scss @@ -32,7 +32,7 @@ } @media (min-width: 860px) { - max-height: 100%; + max-height: calc(100% - 40px); } } diff --git a/src/components/intro/style.scss b/src/components/intro/style.scss index 1ab4d88a..8d1b3124 100644 --- a/src/components/intro/style.scss +++ b/src/components/intro/style.scss @@ -19,7 +19,6 @@ } .intro { - composes: abs-fill from '../../lib/util.scss'; display: grid; grid-template-rows: 1fr min-content; align-items: center; @@ -29,6 +28,9 @@ -webkit-overflow-scrolling: touch; overflow: auto; padding: 20px 0 0; + height: 100%; + box-sizing: border-box; + overscroll-behavior: contain; } .logo-container { diff --git a/src/style/index.scss b/src/style/index.scss index 27037998..6a638106 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -2,7 +2,6 @@ html, body { height: 100%; - width: 100%; padding: 0; margin: 0; font: 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif;