search

Kattixie / portfolio

A minimal AngularJS portfolio for project-oriented folks.
1 stars 0 forks source link

Slight fixed nav wobble on compact view scroll #12

Closed Kattixie closed 8 years ago

Kattixie commented 8 years ago

It's very weird. Could possibly have to do with scroll timeout being set to 10? Seems to happen on all views, but only sometimes. Only detected in Chrome so far.

Kattixie commented 8 years ago

Seems particularly bad over images?

Kattixie commented 8 years ago

I'm starting to wonder if this is related to the position being tied to the bottom of the fixed container. Would be a real bummer to have to re-work that, so I'll have to do some tests to verify.

Kattixie commented 8 years ago

It has nothing to do with images. It's happening where the content marker is, which happens to be on a lot of images. Something to do with what's happening in the change to compact view. Again, only happening in Chrome (possibly Webkit browsers).

Kattixie commented 8 years ago

I spent a long time trying to diagnose the cause (disabled animations, double-checked that animation is only getting applied once per state change, tried fixed instead of absolute position). It happens for sure in two cases: around the content marker, and if the menu is opened in compact view and then closed via a scroll event.

Interestingly, the problem does not appear as bad in Canary.

Kattixie commented 8 years ago

Also important, it appears on both my-collapsible-menu-c and my-sequence-nav. These elements do not have a parent/child relationship, so whatever is causing it appears to exist separately in TWO cases. This wasn't a problem when I first built these elements out, either.

Kattixie commented 8 years ago

I've stripped the menu down to bones and the wobble/shake still appears on the container element. Again it seems better in Canary, but I can't find a bug of this nature reported anywhere. This sounds like a job for Mod Mario.

Kattixie commented 8 years ago

This is almost entirely gone in the latest version of Chrome. I do think it's a bug, but simple tests couldn't replicate it, so it must have something to do with my setup in particular. Perhaps use of z-indices? Or the kinds of elements it's scrolling over? An animating wobble still happens if:

  1. The user opens the menu at the top of the page.
  2. The user scrolls down past the content marker.

The wobble will persist in all expanding/collapsing of the menu from here.

Kattixie commented 8 years ago

The wobble/jitter (seeing that word more in Chromium bugs list) happens even with content removed.

Kattixie commented 8 years ago

The scroll also needs to happen fairly quickly. It's almost as if the problem is manifesting if the animation to close has not completed by the time the content marker is reached.

Kattixie commented 8 years ago

Fingers crossed, but the answer here might have fixed it:

http://stackoverflow.com/questions/32875046/ios-9-safari-changing-an-element-to-fixed-position-while-scrolling-wont-paint

The problem described is not the same, but the solution:

transform: translate3d(0px,0px,0px); position: fixed;

...seems to have made a difference. I wish I could figure out why the bug doesn't happen in all cases of switching from static/absolute/relative to fixed, though. It also definitely seems to be Webkit specific.

Kattixie commented 8 years ago

Haven't seen this problem on Chrome since the fix above. However it displays still in Chrome's device view. I did not notice it in iOS Safari.