fix: remove iOS sticky workaround (#1556)
I'm not sure what changed, but #667 no longer seems to be an issue, so it looks like we can safely remove this workaround. I even tested in a simulator in iOS 11.4 and we don't seem to be affected anymore.
This commit is contained in:
parent
3de7a5ba9a
commit
8c5d6fe667
|
@ -1,5 +1,5 @@
|
||||||
<div class="compose-box-button-sentinel" ref:sentinel></div>
|
<div class="compose-box-button-sentinel" ref:sentinel></div>
|
||||||
<div class="compose-box-button-wrapper {showSticky ? 'compose-box-button-sticky' : ''} {hideAndFadeIn}"
|
<div class="{computedClass}"
|
||||||
ref:wrapper >
|
ref:wrapper >
|
||||||
<ComposeButton {overLimit} {sticky} on:click="onClickButton()" />
|
<ComposeButton {overLimit} {sticky} on:click="onClickButton()" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,29 +27,17 @@
|
||||||
z-index: 5000;
|
z-index: 5000;
|
||||||
top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
|
top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (-webkit-overflow-scrolling: touch) {
|
|
||||||
.compose-box-button-sticky {
|
|
||||||
/* disable sticky positioning on iOS due to
|
|
||||||
https://github.com/nolanlawson/pinafore/issues/667 */
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import ComposeButton from './ComposeButton.html'
|
import ComposeButton from './ComposeButton.html'
|
||||||
import { store } from '../../_store/store'
|
import { store } from '../../_store/store'
|
||||||
import { importShowComposeDialog } from '../dialog/asyncDialogs'
|
import { importShowComposeDialog } from '../dialog/asyncDialogs'
|
||||||
import { observe } from 'svelte-extras'
|
import { observe } from 'svelte-extras'
|
||||||
|
import { classname } from '../../_utils/classname'
|
||||||
const USE_IOS_WORKAROUND = process.browser && CSS.supports('-webkit-overflow-scrolling', 'touch')
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate () {
|
oncreate () {
|
||||||
this.setupIntersectionObservers()
|
this.setupIntersectionObservers()
|
||||||
this.setupIOSWorkaround()
|
|
||||||
},
|
},
|
||||||
ondestroy () {
|
ondestroy () {
|
||||||
this.teardownIntersectionObservers()
|
this.teardownIntersectionObservers()
|
||||||
|
@ -59,7 +47,12 @@
|
||||||
sticky: false
|
sticky: false
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
timelineInitialized: ({ $timelineInitialized }) => $timelineInitialized
|
timelineInitialized: ({ $timelineInitialized }) => $timelineInitialized,
|
||||||
|
computedClass: ({ showSticky, hideAndFadeIn }) => (classname(
|
||||||
|
'compose-box-button-wrapper',
|
||||||
|
showSticky && 'compose-box-button-sticky',
|
||||||
|
hideAndFadeIn
|
||||||
|
))
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
observe,
|
observe,
|
||||||
|
@ -77,59 +70,6 @@
|
||||||
async showDialog () {
|
async showDialog () {
|
||||||
(await importShowComposeDialog())()
|
(await importShowComposeDialog())()
|
||||||
},
|
},
|
||||||
setupIOSWorkaround () {
|
|
||||||
// This is an elaborate fix for https://github.com/nolanlawson/pinafore/issues/667
|
|
||||||
// We detect iOS using support for -webkit-overflow-scrolling: touch
|
|
||||||
// (both here and in global.scss). Then, we set the main content element
|
|
||||||
// to be overflow-x: hidden, which normally would break the sticky button
|
|
||||||
// because its parent is now the scrolling context. So for iOS only, we
|
|
||||||
// create a fake sticky button by listening to intersecting events
|
|
||||||
// and inserting a permanently fixed-position element into the DOM.
|
|
||||||
const { showSticky } = this.get()
|
|
||||||
if (!USE_IOS_WORKAROUND || !showSticky) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const cleanup = () => {
|
|
||||||
const existingElement = document.getElementById('the-sticky-button')
|
|
||||||
if (existingElement) {
|
|
||||||
document.body.removeChild(existingElement)
|
|
||||||
}
|
|
||||||
if (this.__fixedStickyButton) {
|
|
||||||
this.__fixedStickyButton.destroy()
|
|
||||||
this.__fixedStickyButton = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createFixedStickyButton = () => {
|
|
||||||
const element = document.createElement('div')
|
|
||||||
element.setAttribute('id', 'the-sticky-button')
|
|
||||||
element.classList.add('compose-box-button-wrapper')
|
|
||||||
element.classList.add('compose-box-button-fixed')
|
|
||||||
document.body.appendChild(element)
|
|
||||||
const rect = this.refs.wrapper.getBoundingClientRect()
|
|
||||||
Object.assign(element.style, {
|
|
||||||
left: `${rect.left}px`,
|
|
||||||
position: 'fixed'
|
|
||||||
})
|
|
||||||
this.__fixedStickyButton = new ComposeButton({
|
|
||||||
target: element,
|
|
||||||
data: {
|
|
||||||
sticky: true,
|
|
||||||
overLimit: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.__fixedStickyButton.on('click', () => this.showDialog())
|
|
||||||
}
|
|
||||||
|
|
||||||
this.observe('sticky', sticky => {
|
|
||||||
cleanup()
|
|
||||||
if (sticky) {
|
|
||||||
createFixedStickyButton()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.on('destroy', () => cleanup())
|
|
||||||
},
|
|
||||||
setupIntersectionObservers () {
|
setupIntersectionObservers () {
|
||||||
const sentinel = this.refs.sentinel
|
const sentinel = this.refs.sentinel
|
||||||
|
|
||||||
|
|
|
@ -20,11 +20,6 @@ body {
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
|
contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
|
||||||
// these paddings should be kept in sync with getMainTopMargin.js
|
|
||||||
@supports (-webkit-overflow-scrolling: touch) {
|
|
||||||
// fixes iOS Safari horizontal scrolling (see https://github.com/nolanlawson/pinafore/issues/667)
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
padding-top: var(--main-content-pad-top);
|
padding-top: var(--main-content-pad-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue