Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | 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. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | chat-safari-breaks-here | chat-safari-experiments |
| Files: | files | file ages | folders |
| SHA3-256: |
8747d85ea0a9b46787f757490fa99047 |
| User & Date: | stephan 2020-12-27 01:58:46.225 |
Context
|
2020-12-27
| ||
| 01:58 | 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. Closed-Leaf check-in: 8747d85ea0 user: stephan tags: chat-safari-breaks-here, chat-safari-experiments | |
| 01:07 | CSS tweaks to attempt to counter some Safari message spacing problems - cannot test locally. Also limit the chat image preview to 40% of the viewport width/height, to avoid it taking up the whole screen for a large image. check-in: 670732a68f user: stephan tags: chat-safari-breaks-here, chat-safari-experiments | |
Changes
Changes to src/chat.js.
| ︙ | ︙ | |||
14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
//document.body.classList.add('chat-only-mode');
const Chat = (function(){
const cs = {
e:{/*map of certain DOM elements.*/
messageInjectPoint: E1('#message-inject-point'),
pageTitle: E1('head title'),
loadToolbar: undefined /* the load-posts toolbar (dynamically created) */,
| > > > > > > > > > > > > > > > > > > > > > > > > | 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
const ForceResizeKludge = (function(){
/* Workaround for Safari mayhem regarding use of vh CSS units....
We tried to use vh units to set the content area size for the
chat layout, but Safari chokes on that, so we calculate that
height here: 85% when in "normal" mode and 95% in chat-only
mode. Larger than ~95% is too big for Firefox on Android,
causing the input area to move off-screen. */
const contentArea = E1('div.content');
const resized = function(){
const wh = window.innerHeight,
mult = document.body.classList.contains('chat-only-mode') ? 0.95 : 0.85;
contentArea.style.maxHeight = (wh * mult)+"px";
//console.debug("resized.",wh, window.getComputedStyle(contentArea).maxHeight);
};
var doit;
window.addEventListener('resize',function(ev){
clearTimeout(doit);
doit = setTimeout(resized, 100);
}, false);
resized();
return resized;
})();
//document.body.classList.add('chat-only-mode');
const Chat = (function(){
const cs = {
e:{/*map of certain DOM elements.*/
messageInjectPoint: E1('#message-inject-point'),
pageTitle: E1('head title'),
loadToolbar: undefined /* the load-posts toolbar (dynamically created) */,
|
| ︙ | ︙ | |||
168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
document.body.scroll(0,document.body.height);
}else{
D.removeClass(f.elemsToToggle, 'hidden');
D.removeClass(document.body, 'chat-only-mode');
}
const msg = document.querySelector('.message-widget');
if(msg) setTimeout(()=>msg.scrollIntoView(),0);
return this;
},
toggleChatOnlyMode: function(){
return this.chatOnlyMode(!this.isChatOnlyMode());
},
settings:{
get: (k,dflt)=>F.storage.get(k,dflt),
| > | 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 |
document.body.scroll(0,document.body.height);
}else{
D.removeClass(f.elemsToToggle, 'hidden');
D.removeClass(document.body, 'chat-only-mode');
}
const msg = document.querySelector('.message-widget');
if(msg) setTimeout(()=>msg.scrollIntoView(),0);
ForceResizeKludge();
return this;
},
toggleChatOnlyMode: function(){
return this.chatOnlyMode(!this.isChatOnlyMode());
},
settings:{
get: (k,dflt)=>F.storage.get(k,dflt),
|
| ︙ | ︙ |
Changes to src/default.css.
| ︙ | ︙ | |||
1656 1657 1658 1659 1660 1661 1662 |
}
body.chat div.content {
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
| | > | > | | 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 |
}
body.chat div.content {
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
/*max-height: 85vh*/ /* rough approximate */
/* ^^^^ This breaks Safari badly - we'll have to calc this from JS */;
}
body.chat.chat-bottom-up div.content {
flex-direction: column-reverse;
}
body.chat.chat-only-mode div.content {
/*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
/* ^^^^ Safari hates this: we re-calc it in JS */
/* Some skins set margins and a max-width on div.content, but we
needn't(?) honor those in chat-only mode. */
margin: 0;
width: 100%;
max-width: 100%;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
display: flex;
flex-direction: column;
border-bottom: 1px solid black;
padding: 0.5em 1em 0 0.5em;
margin-bottom: 0.5em;
z-index: 100
/* see notes in #chat-messages-wrapper. The various popups require a
z-index higher than this one. */;
flex: 1 1 auto;
}
body.chat.chat-bottom-up #chat-input-area {
border-bottom: none;
border-top: 1px solid black;
margin-bottom: 0;
margin-top: 0.5em;
}
|
| ︙ | ︙ |