Giter Club home page Giter Club logo

Comments (4)

pbakaus avatar pbakaus commented on July 30, 2024 1

I tried debugging this for 2 hours without any progress whatsoever. here's what I tried:

  • When opening an article, the class .sr-article-shown is added to the body, which in return adds max-height: 100vh and overflow:hidden to the <main> element (so you can't scroll out of the article). Removing it didn't help.

  • When opening an article, in Article.js, the function takeoverScroll() resets the scrollTop on the <body> to 0, so the article can be scrolled normally. When returning to the list view, restoreScroll() is restoring it to the previous value. Tried a version that uses transforms to shift. Removing it didn't help.

There's really not much other magic going on – all other elements should play along fine (and are only animated with transforms and opacity). Any help appreciated :/

from samples.

smfr avatar smfr commented on July 30, 2024

Testing https://amp.cards on iOS 11: If you do a screen recording and play it back slowly, you can see when going into an article that there's a frame where the previous screen's contents are showing. Not sure why yet. Want to open a bugs.webkit.org bug for this so I can do some investigation?

from samples.

pbakaus avatar pbakaus commented on July 30, 2024

thanks @smfr! Here's your bug: https://bugs.webkit.org/show_bug.cgi?id=174832

I did make progress yesterday evening on this issue, but it's not gone. Previously, the article animation (when tapping a card) was done using Web Animations, and therefore the Web Animations polyfill in Safari. The polyfill had a weird bug that waited a few frames after the onfinish event before restoring the previously set value (in this case opacity and transform), which caused the jarring flicker. I since refactored said code and are now using purely CSS transitions. It's much better now, at least on iOS 10.3, but I still see occasional flickers.

from samples.

oliverfernandez avatar oliverfernandez commented on July 30, 2024

Webkit still has problems when promoting / downgrading layers to / from GPU. That's when usually the flickering occurs. And since you still have the main element behind the article element when you are opening it, the main can be seen for a second.

You can try a quick (and dirty) solution, leaving the article element promoted to GPU. Instead of setting transform: translateY(0), try setting transform: translate3d(0,0,0) You can try this first to check if it works.

If the previous works (so my suspicions are confirmed), something that has worked for me to avoid iOS flickers without leaving unnecessary layers in GPU, is to leave the final element that is being animated in a position: static state. For this specific case, you could try:

  1. Once the animation has ended, leave the final element (in this case, the article element), in position: static, transform: none, and be sure to don't set any z-index, opacity or overflow properties, that can make Webkit to suddenly promote your layer to GPU

  2. You may need to set the main element to position: absolute; so it does not pushes down article element

  3. Make sure to do all the previous manipulations and the modification of the body scroll all together, in the same Javascript frame, so Webkit does 1 relayout.

BTW, I tried to debug this using Safari 10 Desktop, emulating iPhone, but opening the article does not work, I don't know why.

from samples.

Related Issues (20)

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.