Fix document not scrolling in iOS (all browsers) (#5599)

* Fix document not scrolling in iOS (all browsers) This patches a bug where users cannot scroll a document on iOS, because iOS does not allow iframes to be scrolled. See https://davidwalsh.name/scroll-iframes-ios for details. * trigger GitHub actions --------- Co-authored-by: John McLear <[email protected]>
ether · Jun 3, 2024 · 2301fdd · 2301fdd
1 parent 426174d
commit 2301fdd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/static/skins/colibris/src/layout.css b/src/static/skins/colibris/src/layout.css
@@ -1,3 +1,18 @@
+.scroll-wrapper { 
+  display: flex;
+  min-width: 100vw;
+}
+
+@supports (-webkit-touch-callout: none)  {
+  .scroll-wrapper {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+  }                      
+
+  .scroll-wrapper iframe {}
+
+}
+
 #outerdocbody {
   margin: 0 auto;
   padding-top: 20px;

diff --git a/src/templates/pad.html b/src/templates/pad.html
@@ -80,7 +80,9 @@
 
   <% e.begin_block("afterEditbar"); %><% e.end_block(); %>
 
-  <div id="editorcontainerbox" class="flex-layout">
+      <div class="scroll-wrapper">
+          <div id="editorcontainerbox" class="flex-layout">
+      </div>
 
       <% e.begin_block("editorContainerBox"); %>