Fossil SCM
chat: Safari has a severe allergic reaction to CSS vh units, so calculate the size of the affected DOM element in JS code at app startup and when the window resizes.
Commit
8747d85ea0a9b46787f757490fa990477a0c82a4b287b85105779c25e81250d5
Parent
670732a68ffb57e…
2 files changed
+25
+5
-3
+25
| --- src/chat.js | ||
| +++ src/chat.js | ||
| @@ -16,10 +16,34 @@ | ||
| 16 | 16 | rect.left >= 0 && |
| 17 | 17 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && |
| 18 | 18 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) |
| 19 | 19 | ); |
| 20 | 20 | }; |
| 21 | + | |
| 22 | + const ForceResizeKludge = (function(){ | |
| 23 | + /* Workaround for Safari mayhem regarding use of vh CSS units.... | |
| 24 | + We tried to use vh units to set the content area size for the | |
| 25 | + chat layout, but Safari chokes on that, so we calculate that | |
| 26 | + height here: 85% when in "normal" mode and 95% in chat-only | |
| 27 | + mode. Larger than ~95% is too big for Firefox on Android, | |
| 28 | + causing the input area to move off-screen. */ | |
| 29 | + const contentArea = E1('div.content'); | |
| 30 | + const resized = function(){ | |
| 31 | + const wh = window.innerHeight, | |
| 32 | + mult = document.body.classList.contains('chat-only-mode') ? 0.95 : 0.85; | |
| 33 | + contentArea.style.maxHeight = (wh * mult)+"px"; | |
| 34 | + //console.debug("resized.",wh, window.getComputedStyle(contentArea).maxHeight); | |
| 35 | + }; | |
| 36 | + var doit; | |
| 37 | + window.addEventListener('resize',function(ev){ | |
| 38 | + clearTimeout(doit); | |
| 39 | + doit = setTimeout(resized, 100); | |
| 40 | + }, false); | |
| 41 | + resized(); | |
| 42 | + return resized; | |
| 43 | + })(); | |
| 44 | + | |
| 21 | 45 | //document.body.classList.add('chat-only-mode'); |
| 22 | 46 | const Chat = (function(){ |
| 23 | 47 | const cs = { |
| 24 | 48 | e:{/*map of certain DOM elements.*/ |
| 25 | 49 | messageInjectPoint: E1('#message-inject-point'), |
| @@ -170,10 +194,11 @@ | ||
| 170 | 194 | D.removeClass(f.elemsToToggle, 'hidden'); |
| 171 | 195 | D.removeClass(document.body, 'chat-only-mode'); |
| 172 | 196 | } |
| 173 | 197 | const msg = document.querySelector('.message-widget'); |
| 174 | 198 | if(msg) setTimeout(()=>msg.scrollIntoView(),0); |
| 199 | + ForceResizeKludge(); | |
| 175 | 200 | return this; |
| 176 | 201 | }, |
| 177 | 202 | toggleChatOnlyMode: function(){ |
| 178 | 203 | return this.chatOnlyMode(!this.isChatOnlyMode()); |
| 179 | 204 | }, |
| 180 | 205 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -16,10 +16,34 @@ | |
| 16 | rect.left >= 0 && |
| 17 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && |
| 18 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) |
| 19 | ); |
| 20 | }; |
| 21 | //document.body.classList.add('chat-only-mode'); |
| 22 | const Chat = (function(){ |
| 23 | const cs = { |
| 24 | e:{/*map of certain DOM elements.*/ |
| 25 | messageInjectPoint: E1('#message-inject-point'), |
| @@ -170,10 +194,11 @@ | |
| 170 | D.removeClass(f.elemsToToggle, 'hidden'); |
| 171 | D.removeClass(document.body, 'chat-only-mode'); |
| 172 | } |
| 173 | const msg = document.querySelector('.message-widget'); |
| 174 | if(msg) setTimeout(()=>msg.scrollIntoView(),0); |
| 175 | return this; |
| 176 | }, |
| 177 | toggleChatOnlyMode: function(){ |
| 178 | return this.chatOnlyMode(!this.isChatOnlyMode()); |
| 179 | }, |
| 180 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -16,10 +16,34 @@ | |
| 16 | rect.left >= 0 && |
| 17 | rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && |
| 18 | rect.right <= (window.innerWidth || document.documentElement.clientWidth) |
| 19 | ); |
| 20 | }; |
| 21 | |
| 22 | const ForceResizeKludge = (function(){ |
| 23 | /* Workaround for Safari mayhem regarding use of vh CSS units.... |
| 24 | We tried to use vh units to set the content area size for the |
| 25 | chat layout, but Safari chokes on that, so we calculate that |
| 26 | height here: 85% when in "normal" mode and 95% in chat-only |
| 27 | mode. Larger than ~95% is too big for Firefox on Android, |
| 28 | causing the input area to move off-screen. */ |
| 29 | const contentArea = E1('div.content'); |
| 30 | const resized = function(){ |
| 31 | const wh = window.innerHeight, |
| 32 | mult = document.body.classList.contains('chat-only-mode') ? 0.95 : 0.85; |
| 33 | contentArea.style.maxHeight = (wh * mult)+"px"; |
| 34 | //console.debug("resized.",wh, window.getComputedStyle(contentArea).maxHeight); |
| 35 | }; |
| 36 | var doit; |
| 37 | window.addEventListener('resize',function(ev){ |
| 38 | clearTimeout(doit); |
| 39 | doit = setTimeout(resized, 100); |
| 40 | }, false); |
| 41 | resized(); |
| 42 | return resized; |
| 43 | })(); |
| 44 | |
| 45 | //document.body.classList.add('chat-only-mode'); |
| 46 | const Chat = (function(){ |
| 47 | const cs = { |
| 48 | e:{/*map of certain DOM elements.*/ |
| 49 | messageInjectPoint: E1('#message-inject-point'), |
| @@ -170,10 +194,11 @@ | |
| 194 | D.removeClass(f.elemsToToggle, 'hidden'); |
| 195 | D.removeClass(document.body, 'chat-only-mode'); |
| 196 | } |
| 197 | const msg = document.querySelector('.message-widget'); |
| 198 | if(msg) setTimeout(()=>msg.scrollIntoView(),0); |
| 199 | ForceResizeKludge(); |
| 200 | return this; |
| 201 | }, |
| 202 | toggleChatOnlyMode: function(){ |
| 203 | return this.chatOnlyMode(!this.isChatOnlyMode()); |
| 204 | }, |
| 205 |
+5
-3
| --- src/default.css | ||
| +++ src/default.css | ||
| @@ -1658,17 +1658,19 @@ | ||
| 1658 | 1658 | body.chat div.content { |
| 1659 | 1659 | padding: 0; |
| 1660 | 1660 | display: flex; |
| 1661 | 1661 | flex-direction: column; |
| 1662 | 1662 | align-items: stretch; |
| 1663 | - max-height: 85vh /* rough approximate */; | |
| 1663 | + /*max-height: 85vh*/ /* rough approximate */ | |
| 1664 | + /* ^^^^ This breaks Safari badly - we'll have to calc this from JS */; | |
| 1664 | 1665 | } |
| 1665 | 1666 | body.chat.chat-bottom-up div.content { |
| 1666 | 1667 | flex-direction: column-reverse; |
| 1667 | 1668 | } |
| 1668 | 1669 | body.chat.chat-only-mode div.content { |
| 1669 | - max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/; | |
| 1670 | + /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/; | |
| 1671 | + /* ^^^^ Safari hates this: we re-calc it in JS */ | |
| 1670 | 1672 | /* Some skins set margins and a max-width on div.content, but we |
| 1671 | 1673 | needn't(?) honor those in chat-only mode. */ |
| 1672 | 1674 | margin: 0; |
| 1673 | 1675 | width: 100%; |
| 1674 | 1676 | max-width: 100%; |
| @@ -1681,11 +1683,11 @@ | ||
| 1681 | 1683 | padding: 0.5em 1em 0 0.5em; |
| 1682 | 1684 | margin-bottom: 0.5em; |
| 1683 | 1685 | z-index: 100 |
| 1684 | 1686 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1685 | 1687 | z-index higher than this one. */; |
| 1686 | - flex: 0 0 auto; | |
| 1688 | + flex: 1 1 auto; | |
| 1687 | 1689 | } |
| 1688 | 1690 | body.chat.chat-bottom-up #chat-input-area { |
| 1689 | 1691 | border-bottom: none; |
| 1690 | 1692 | border-top: 1px solid black; |
| 1691 | 1693 | margin-bottom: 0; |
| 1692 | 1694 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1658,17 +1658,19 @@ | |
| 1658 | body.chat div.content { |
| 1659 | padding: 0; |
| 1660 | display: flex; |
| 1661 | flex-direction: column; |
| 1662 | align-items: stretch; |
| 1663 | max-height: 85vh /* rough approximate */; |
| 1664 | } |
| 1665 | body.chat.chat-bottom-up div.content { |
| 1666 | flex-direction: column-reverse; |
| 1667 | } |
| 1668 | body.chat.chat-only-mode div.content { |
| 1669 | max-height: 95vh/*larger than approx. this is too big for Firefox on Android*/; |
| 1670 | /* Some skins set margins and a max-width on div.content, but we |
| 1671 | needn't(?) honor those in chat-only mode. */ |
| 1672 | margin: 0; |
| 1673 | width: 100%; |
| 1674 | max-width: 100%; |
| @@ -1681,11 +1683,11 @@ | |
| 1681 | padding: 0.5em 1em 0 0.5em; |
| 1682 | margin-bottom: 0.5em; |
| 1683 | z-index: 100 |
| 1684 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1685 | z-index higher than this one. */; |
| 1686 | flex: 0 0 auto; |
| 1687 | } |
| 1688 | body.chat.chat-bottom-up #chat-input-area { |
| 1689 | border-bottom: none; |
| 1690 | border-top: 1px solid black; |
| 1691 | margin-bottom: 0; |
| 1692 |
| --- src/default.css | |
| +++ src/default.css | |
| @@ -1658,17 +1658,19 @@ | |
| 1658 | body.chat div.content { |
| 1659 | padding: 0; |
| 1660 | display: flex; |
| 1661 | flex-direction: column; |
| 1662 | align-items: stretch; |
| 1663 | /*max-height: 85vh*/ /* rough approximate */ |
| 1664 | /* ^^^^ This breaks Safari badly - we'll have to calc this from JS */; |
| 1665 | } |
| 1666 | body.chat.chat-bottom-up div.content { |
| 1667 | flex-direction: column-reverse; |
| 1668 | } |
| 1669 | body.chat.chat-only-mode div.content { |
| 1670 | /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/; |
| 1671 | /* ^^^^ Safari hates this: we re-calc it in JS */ |
| 1672 | /* Some skins set margins and a max-width on div.content, but we |
| 1673 | needn't(?) honor those in chat-only mode. */ |
| 1674 | margin: 0; |
| 1675 | width: 100%; |
| 1676 | max-width: 100%; |
| @@ -1681,11 +1683,11 @@ | |
| 1683 | padding: 0.5em 1em 0 0.5em; |
| 1684 | margin-bottom: 0.5em; |
| 1685 | z-index: 100 |
| 1686 | /* see notes in #chat-messages-wrapper. The various popups require a |
| 1687 | z-index higher than this one. */; |
| 1688 | flex: 1 1 auto; |
| 1689 | } |
| 1690 | body.chat.chat-bottom-up #chat-input-area { |
| 1691 | border-bottom: none; |
| 1692 | border-top: 1px solid black; |
| 1693 | margin-bottom: 0; |
| 1694 |