# Generators yield slowly on first page view in Safari

**URL:** <https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951>\
**Category:** Help\
**Created:** [May 18, 2023, 9:44am UTC](https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951 "2023-05-18T09:44:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 18, 2023, 9:44am UTC](https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951/1 "2023-05-18T09:44:16Z")

</div>

When I view observable pages in Safari (my default), generator functions that yield results on each cycle seem much slower when the page is first viewed. Re-triggering the generator via an input element sets the generator off more quickly.

For example, in the following, in Safari, the generator takes about 8 seconds to complete all its yielded values when initially opened, but only about 2 seconds when retriggered with the ‘reset’ button. If I view the page in Chrome, I get a consistent time of around 2 seconds whether viewed for the first time or re-triggered.

> **[Speed Test](https://observablehq.com/d/b805b170aaae1c88)**
>
> When this page is loaded for the first time via Safari, calling a generator function that yields a result on each cycle seems to take longer the first time than when subsequently re-triggered via an input event. I don't see this problem when viewing...

I tend to use this generator pattern quite frequently when I want to show animations that can be reset with a button, so I’d love to find a fix/workaround for Safari users.

Is this a bug, or am I not using the correct generator pattern?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 18, 2023, 9:51am UTC](https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951/2 "2023-05-18T09:51:41Z")

</div>

> [@jwoLondon](#):
>
> Is this a bug, or am I not using the correct generator pattern?

Neither. Top level generators in Observable are processed via requestAnimationFrame. Safari limits the frame rate (as well as timeouts) until the first user interaction. If you want to utilize the full frame rate you’ll have to make your users start the animation.

You can find more details here:

- [safari framerate cap in rendered notebooks pre-interaction](https://talk.observablehq.com/t/safari-framerate-cap-in-rendered-notebooks-pre-interaction/4528)
- [Runtime stops executing when in background · Issue #458 · observablehq/feedback · GitHub](https://github.com/observablehq/feedback/issues/458)

For animations I would generally recommend to design them in a way that lets you produce a frame for any given point in time. That way you can define the desired duration, and then calculate the current animation offset since the animation start on every yield.

---

<div class="post-metadata">

**Author:** ![jwoLondon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jwolondon/32/259_2.png) [@jwoLondon](https://talk.observablehq.com/u/jwoLondon)\
**Post date:** [May 18, 2023, 10:10am UTC](https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951/3 "2023-05-18T10:10:27Z")

</div>

Very helpful ,thanks. I did search the forum for such posts, but my keyword choices didn’t pick this up. I’ll add a ‘start’ button in such cases, which is probably a better UX policy anyway, especially when animation not displayed at the top of the page.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [May 18, 2023, 10:25am UTC](https://talk.observablehq.com/t/generators-yield-slowly-on-first-page-view-in-safari/7951/4 "2023-05-18T10:25:42Z")

</div>

> [@jwoLondon](#):
>
> which is probably a better UX policy anyway, especially when animation not displayed at the top of the page.

You can await the `visibility()` promise in each cell to delay execution until the cell is scrolled into the viewport. However, this still seems to suffer from the same frame rate issues and can also fire too early if some of the preceding content takes a moment to load.