cal.com icon indicating copy to clipboard operation
cal.com copied to clipboard
verified publisher icon calcom

[CAL-1656] Embed UX Issue

Open hariombalhara opened this issue 2 years ago • 4 comments

The flash of a white backgound is jarring on a dark site, which is unavoidable with iframes. Also iframes don't render properly inside of Framer Motion layout animations. image

Slack Message

CAL-1656

hariombalhara avatar May 12 '23 05:05 hariombalhara

Current situation:

  • The script that adds 'dark' class to html tag is in body and till then browser has already rendered a white background
  • I moved the script to at the top of head which improved the situation a bit but there is still a white background tha can be seen
  • Tried adding a style attribute to html tag with background dark, which too doesn't help. It points in the direction that the browser seems to add white background even before iframe starts loading. How can we change that? There should ideally be something on iframe that we can tweak. Tried setting background on iframe tag itself, doesn't help. That background is not visible.

hariombalhara avatar May 12 '23 05:05 hariombalhara

@hariombalhara hey bro but i dont think it happens in prod as ssr is happening the white screen is isnt seen ... or maybe i understood the issue wrong.. correct me if so😅

saurabbot avatar May 17 '23 08:05 saurabbot

It's in prod only. Did you test out https://build-a9f5d2e9-c1aa-40fc-b9a7-caf250e36fa0.gatsbyjs.io/ ? It doesn't matter if SSR is done.

hariombalhara avatar May 17 '23 08:05 hariombalhara

okay ill try to figure out ... btw https://build-a9f5d2e9-c1aa-40fc-b9a7-caf250e36fa0.gatsbyjs.io/ this looks mad.

saurabbot avatar May 17 '23 09:05 saurabbot