add basic implementation .

resources/static/css/common.css

@@ -89,6 +89,12 @@ html {
     font-family: var(--ls-font-family), Inter, sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial ,"Noto Sans", serif, Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;
 }
 
+html.is-ios, html.is-ios > body {
+    -webkit-overflow-scrolling : touch;
+    overflow: auto !important;
+    height: 100% !important;
+}
+
 @supports (font-variation-settings: normal) {
     html {
         font-family: 'Inter var', sans-serif;

src/main/frontend/components/editor.cljs

@@ -217,16 +217,17 @@
 
 (rum/defc mobile-bar < rum/reactive
   [parent-state parent-id]
-  [:div.bg-base-2 {:style {:position "fixed"
+  [:div.bg-base-2.fix-ios-fixed-bottom
-                           :bottom 0
+   {:style {:position        "fixed"
-                           :width "100%"
+            :bottom          0
-                           :left 0
+            :width           "100%"
-                           :justify-content "center"
+            :left            0
-                           :height "2.5rem"
+            :justify-content "center"
-                           :display "flex"
+            :height          "2.5rem"
-                           :align-items "center"
+            :display         "flex"
-                           ;; This element should be the upper-most in most situations
+            :align-items     "center"
-                           :z-index 99999999}}
+            ;; This element should be the upper-most in most situations
+            :z-index         99999999}}
    [:button.bottom-action
     {:style {:padding "5px"}
      :on-click #(editor-handler/adjust-block-level! parent-state :right)}

src/main/frontend/page.cljs

@@ -12,6 +12,7 @@
 (rum/defc current-page < rum/reactive
   {:did-mount (fn [state]
                 (state/set-root-component! (:rum/react-component state))
+                (ui/setup-patch-ios-fixed-bottom-position)
                 state)}
   []
   (when-let [route-match (state/sub :route-match)]

src/main/frontend/ui.cljs

@@ -193,6 +193,35 @@
 (defn get-scroll-top []
   (.-scrollTop (main-node)))
 
+(defn setup-patch-ios-fixed-bottom-position
+  "fix a common issue about ios webpage viewport
+   when soft keyboard setup"
+  []
+  (if (and
+        (util/ios?)
+        (not (nil? js/window.visualViewport)))
+    (let [viewport js/visualViewport
+          style (js/document.createElement "style")]
+      (.add (.-classList js/document.documentElement) "is-ios")
+      (set! (.-id style) "dynamic-style-scope")
+      (.appendChild js/document.head style)
+      (let [sheet (.-sheet style)
+            type "resize"
+            handler
+            (fn []
+              (let [vh (.-height viewport)
+                    rule (.. sheet -rules (item 0))
+                    set-top #(set! (.. rule -style -top) (str % "px"))]
+                (set-top vh)
+                (prn "resize " vh (.. rule -style -top))))]
+        (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}")
+        (.addEventListener viewport type handler false)
+        (handler)
+        (fn []
+          (.removeEventListener viewport type handler)
+          (prn "teardown viewport " type)))
+      )))
+
 ;; FIXME: compute the right scroll position when scrolling back to the top
 (defn on-scroll
   [on-load on-top-reached]

src/main/frontend/util.cljs

@@ -18,6 +18,10 @@
             [clojure.pprint :refer [pprint]]
             [goog.userAgent]))
 
+;; envs
+(defn ios? []
+  (not (nil? (re-find #"iPad|iPhone|iPod" (.-userAgent js/navigator)))))
+
 (defn format
   [fmt & args]
   (apply gstring/format fmt args))