fix: fix rendering order bug in Firefox for Android (#1752)

This commit is contained in:
Nolan Lawson 2020-04-29 22:00:20 -07:00 committed by GitHub
parent 0ce47f0379
commit 4ad7de8e8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -24,27 +24,30 @@
const priorityQueue = createPriorityQueue() const priorityQueue = createPriorityQueue()
export default { export default {
async oncreate () { oncreate () {
const { makeProps, key, index } = this.get() const { makeProps, key, index } = this.get()
const { reduceMotion } = this.store.get() const { reduceMotion } = this.store.get()
if (makeProps) { if (makeProps) {
await priorityQueue(index) // TODO: I would use async/await here, but Firefox 68 for Android has a bug where
const props = await makeProps(key) // these don't resolve in the proper order unless I use promises
const setProps = () => { priorityQueue(index).then(async () => {
mark('VirtualListLazyItem set props') const props = await makeProps(key)
this.set({ props: props }) const setProps = () => {
stop('VirtualListLazyItem set props') mark('VirtualListLazyItem set props')
} this.set({ props: props })
// On desktop, if prefers-reduced-motion is enabled, avoid using scheduleIdleTask stop('VirtualListLazyItem set props')
// here because it causes the scrollbar to grow in a way that may sicken }
// people with vestibular disorders. // On desktop, if prefers-reduced-motion is enabled, avoid using scheduleIdleTask
// TODO: someday we can use isInputPending as a better way to break up work // here because it causes the scrollbar to grow in a way that may sicken
// https://www.chromestatus.com/feature/5719830432841728 // people with vestibular disorders.
if (!isMobile() && reduceMotion) { // TODO: someday we can use isInputPending as a better way to break up work
setProps() // https://www.chromestatus.com/feature/5719830432841728
} else { if (!isMobile() && reduceMotion) {
scheduleIdleTask(setProps) setProps()
} } else {
scheduleIdleTask(setProps)
}
})
} }
}, },
data: () => ({ data: () => ({