beenull/browsh
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Prevent sticky elements from being sticky

Browse source 
Sticky elements are, for example, those headers that follow you
down the page as you scroll. They are annoying even in desktop
browsers, however because of the lower frame rate of Browsh, sticky
elements stutter down the page, so it's even more annoying. Not to
mention the screen real estate that sticky elements take up, which
is even more noticeable on a small TTY screen like Browsh's.
This commit is contained in:
Thomas Buckley-Houston 2018-06-04 17:52:00 +08:00
parent 7232ac120f
commit e2d39ba56c
1 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
webext/src/dom/manager.js
View file

@ -92,6 +92,7 @@ export default class extends utils.mixins(CommonMixin, CommandsMixin) {
this.sendMessage('/status,page_init'); this.sendMessage('/status,page_init');
this._listenForBackgroundMessages(); this._listenForBackgroundMessages();
this._startWindowEventListeners(); this._startWindowEventListeners();
this._fixStickyElements();
} }
_setupInteractiveMode() { _setupInteractiveMode() {
@ -181,4 +182,24 @@ export default class extends utils.mixins(CommonMixin, CommandsMixin) {
} }
}); });
} }
// Sticky elements are, for example, those headers that follow you down the page as you
// scroll. They are annoying even in desktop browsers, however because of the lower frame
// rate of Browsh, sticky elements stutter down the page, so it's even more annoying. Not
// to mention the screen real estate that sticky elements take up, which is even more
// noticeable on a small TTY screen like Browsh's.
//
// Note that this uses `getComputedStyle()`, which can be expensive, there should only
// be 1 that parses that entire tree during page load. So if there's reason to use more
// CSS tricks like this, then the call should be refactored.
_fixStickyElements() {
let position;
let i, elements = document.querySelectorAll('body *');
for (i = 0; i < elements.length; i++) {
position = getComputedStyle(elements[i]).position;
if (position === 'fixed' || position === 'sticky') {
elements[i].style.position = 'absolute';
}
}
}
} }