Giter Club home page Giter Club logo

fixfixed's Introduction

fixfixed - Smooth Scrolling with 60fps

Chrome extension to improve position:fixed elements with transform:translateZ(0) for smooth 60fps scrolling.

Find the extension in google store here: https://chrome.google.com/webstore/detail/fix-fixed/dgemgghfpehbgjofnpdeidajmobbkhfg

Also i have fixed chromium.app itself to optimized position:fixed directly: https://dl.dropboxusercontent.com/u/96620836/Chromium.app.zip (Compiled for Mac latest version from git Feb 2015) I try to commit the changes to official chromium in several weeks when i understand the deploy process.

It works as follows:

  • Chrome has bad rendering performance with style=position:fixed elements.

  • This patch will load all the stylesheets (and even fetch them via XHR if they are blocked due to https)

  • It is checking all cssRules if they are style.position == "fixed" and creates new css-code

  • At the same time style.tranform != '' are collected, because they can lead to errors

  • the new css are appended and the layers are optimized in future , as the stylesheet is now optimized.

  • to avoid render-errors all real cssRules with transform in it are appended again and they cancel out the translateZ(0) if neccessary.

  • All is done in one parse run, dom is not touched but only css-stylesheet is optimized in a way how the designer of the webpage should have done from the start.

  • if classes are added or removed during scroll (eg. menu shows on scrollback) then all is fine.

fixfixed's People

Contributors

ayurmedia avatar

Stargazers

Andréas avatar PageSpeed avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.