choojs / choojs/choo

Safari 11: Whole page re-render on navigate — what am I doing wrong here ⁉️

Open
#636 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
6.8k
Forks
573
PR merge metrics
No merged PRs in 30d

Description

### Expected behavior
Only 1 image request, modal renders but most elements untouched.

### Actual behavior
every page image requested, whole body seems to re-render.

### Steps to reproduce behavior
Navigate between two pages with an additional/less dom element tree.

Safari 11.03 exhibits the problem. Adding yo-yo-ify doesn't solve it.
Chrome only requests 1 image, and doesn't seem to re-render everything.

---

After months using this framework for my app I discovered that my nginx and caching were hiding the fact that the app was constantly re-rendering the entire body element and everything inside. It's requesting every image in my gallery grid each time I switched images in the Lightbox view.

I was under the impression that morphdom would compare the trees—which are nearly identical—and only render the Lightbox. I probably have something set up incorrectly, or I'm making incorrect assumptions about how the framework works. I have spent hours going over the handbook and figuring out server-side rendering and re-hydration, but now I'm running into another issue where I can't find any examples, guides, discussion, or any evidence this has been done before or anyone has opened the browser tools to see what is really going on.

I think the problem isn't that the framework is obtuse, but the the handbook and documentation are not adequate to onboard new users. There aren't examples of complex apps built with this.

screen shot 2018-03-03 at 7 49 22 pm

Contributor guide

Open the contributing guide

Research direction

No repository file or test is named. Start by reproducing navigation between pages with different DOM trees in Safari 11.03, comparing image requests and body rendering with Chrome; inspect the interaction among the framework, morphdom, and yo-yo-ify. Done means identifying whether the behavior is framework-related or application setup and documenting a concrete resolution.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.