Safari 11: Whole page re-render on navigate — what am I doing wrong here ⁉️
- 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.
Contributor 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