Prismic Toolbar iframe on Safari renders at bottom of page as empty box

There is an empty iframe displaying at the bottom of a site we developed on https://theingenuitygroup.com on Safari (see attached images). On Chrome and other browsers it doesn't render.

It looks like on Chrome on the iframe there is a `style="display: none;" set but on Safari the iframe is missing this inline style.

We're on Nuxt 3, using "@nuxtjs/prismic": "^3.4.8" and hosted on Vercel. (We're unable to upgrade to @nuxtjs/prismic >4 due to separate issues regarding rich text field formatting).

Hey @gpk, thanks for reaching out!

I tried reproducing your issue on Safari without luck, the iframe seems to load as expected on various websites I tested using @nuxtjs/prismic v3 and v4.

Do you have any setup on Safari (extension, settings, etc.) that could tamper with how the iframe is loaded? I see on your screenshot that it has a data-categories="unclassified" attribute (which is not something the toolbar can do) and an empty style attribute, those could be symptomatic of something interfering with it.

For context, this is how the iframe is added to Prismic websites: prismic-toolbar/src/toolbar-service/index.js at 97fb70203f5b312c2750c3644c1a418e6e9ba042 · prismicio/prismic-toolbar · GitHub, the iframe serves us as a communication layer between Prismic and your website for content previews to work.


Side question, but I'm curious what prevents your from migrating to @nuxtjs/prismic v4 regarding rich text formatting? While we now favor a component-based approach for rich text rendering, the old HTML approach is still supported (but deprecated). Either way, it's fine staying on v3 for the time being, and we'll continue to provide bug fixes for it for about a year :)

1 Like