Profile avatar
imkev.dev
Frontend Engineering. Web Performance. Be kind.
53 posts 421 followers 336 following
Regular Contributor
Active Commenter
comment in response to post
Wow, you went for the clear keyboard. 👏
comment in response to post
After debugging this briefly and discussing it with the JIRA team, we confirmed the issue is actually caused by React DevTools not JIRA. Once React DevTools is disabled, JIRA performs well. (the JIRA website enables profiling on production)
comment in response to post
I like his music actually and I'm guessing he has a more interesting story than most, so it might be worth a read. 😁 Thx
comment in response to post
Ah OK I thought it was specific to my user. 😅 The queryLocalFonts API is only supported on Chrome: developer.mozilla.org/en-US/docs/W... Thanks to your article and tool I understood some concept that before I just skimmed over and used without understanding. 🙌
comment in response to post
Similarly, when choosing some fonts from the dropdown it uses serif instead of the selected font, so I need to input the local font name manually. For example, "NotoSans-Regular" instead of "Noto Sans"
comment in response to post
I was experimenting with your tool and noticed that the name of the font in the CSS snippet doesn't match my own tests using `queryLocalFonts()`. For example, the tool outputs `src: local("DejaVu Sans");` instead of `local(DejaVuSans)`. I'm not sure if this is browser (Chrome) /OS (Ubuntu) specific.
comment in response to post
Heads up that there is a crbug for _1. Allow per-request slowdown_: issues.chromium.org/u/1/issues/4...
comment in response to post
No option to remove it? On other hosts I have seen an exclusion list but no option to disable it entirely. 😩 Also if you want a shorter cache TTL, according to your post, having duplicate `cache-control` headers will take the most restrictive one.
comment in response to post
> TODO: figure out that other Cache-Control and ditch it Is it possible that this is being added by the hosting provider? For example, WPEngine automatically adds cache-control headers.
comment in response to post
My 3-year old! 😭
comment in response to post
Got some new props? 😅 I still need to update my blog post after we spoke a few months ago. 🫣
comment in response to post
Added a comment and updated the demos to use a querystring `?noprerender=true` to disable the prerendering. Current status:
comment in response to post
I removed the prerendering from both demos and now they are behaving identically, indicating the issue isn't the response header. Previously, with prerendering the VT wouldn't run on the faulty demo.
comment in response to post
Done: issues.chromium.org/issues/38089... Thanks for following up.
comment in response to post
Yeah, that's the only difference. Still not sure if it is intentional or a bug though.
comment in response to post
I'm not sure if you get notified about replies on the other thread, but I think I found the cause: `cross-origin-opener-policy` response headers. bsky.app/profile/imke...
comment in response to post
Is there a limitation to using view-transition with `cross-origin-opener-policy: same-origin` ? I have a demo here: tidy-fluttering-jackfruit.glitch.me A replica of the above site without the response header for comparison: mellow-crystal-marscapone.glitch.me
comment in response to post
Nope. I would like to be able to debug it but I don't know where to look. Is there a list of things that make a page ineligible?
comment in response to post
Typo: I'm _not_ using pageswap/pagehide.
comment in response to post
I'm using pageswap/pagereveal and I'm not getting any console errors whatsoever. There is no animation, so nothing shows up in the Animations Tab. It only animates when pressing back/forward. I use speculation rules for prerendering the page, I am not sure if those interfere with View Transitions. 🤷
comment in response to post
The only differences I can think of are CSP, Cloudflare CDN, and my website uses a Node server while the Glitch demo is static HTML. From my understanding both should work though.
comment in response to post
Thank you for your help. I created a repro of my personal home page imkev.dev on Glitch octagonal-frosted-branch.glitch.me. The HTML is identical. Both websites use inline style `@view-transition { navigation: auto; }` My personal site does not work (apart from back/forward) while the glitch works.
comment in response to post
Why stop at 48px?