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:
Nolan Lawson 2019-10-08 05:59:45 -07:00 committed by GitHub
parent 3de7a5ba9a
commit 8c5d6fe667
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 73 deletions

View file

@ -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

View file

@ -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);
} }