Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iFrame missing css #1189

Closed
esetnik opened this issue Feb 21, 2023 · 6 comments · Fixed by #1192
Closed

iFrame missing css #1189

esetnik opened this issue Feb 21, 2023 · 6 comments · Fixed by #1192
Labels
🐛 bug Something isn't working

Comments

@esetnik
Copy link

esetnik commented Feb 21, 2023

The problem

After upgrading to v1.19.2 the snapshots of iframed content does not render any CSS.

See https://percy.io/283b5e1b/ProdigyEMS/builds/25284757/changed/1410160725?browser=chrome&browser_ids=33%2C34&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=1280&widths=375%2C1280

Environment

  • Node version:
  • @percy/cli version: v1.19.2
  • Version of Percy SDK you’re using: @percy/cypress v3.1.2
  • If needed, a build or snapshot ID: 25284757
  • OS version: linux
  • Type of shell command-line [interface]: sh

Details

I believe it could be related to #1165

Debug logs

If you are reporting a bug, always include logs! Give the "Debugging SDKs"
document a quick read for how to gather logs

Please do not trim or edit these logs, often times there are hints in the full
logs that help debug what is going on.

Code to reproduce issue

Given the nature of testing/environment bugs, it’s best to try and isolate the
issue in a reproducible repo. This will make it much easier for us to diagnose
and fix.

@itsjwala
Copy link
Contributor

Hey @esetnik 👋

I checked the build and could see the style sheets are being discovered as text/html instead of text/css causing it to not load it.

image

image

you can verify it on your end by checking --verbose logs of the CLI for asset discovery browser.

@esetnik
Copy link
Author

esetnik commented Feb 21, 2023

@itsjwala but those paths are not the correct paths to the css files in the iframe. It looks like percy is rewriting the paths for iframed content for some reason to use a relative path on the parent page. This is new behavior as of v1.19.2 (the iframed snapshots are working correctly in real tests as well as in percy v1.18.0 and earlier).

@esetnik
Copy link
Author

esetnik commented Feb 21, 2023

image

@itsjwala
Copy link
Contributor

itsjwala commented Feb 21, 2023

@esetnik

  • yes we override the parent base URL with our own domain, but the iframe URL for the styles seems to be the same for styles.css

It looks like percy is rewriting the paths for iframed content for some reason to use a relative path on the parent page

  • We've not changed this behaviour - its the same ref.

  • The point being that those assets are being discovered as text/html - can you please share verbose logs in this case for us to debug better?

@esetnik
Copy link
Author

esetnik commented Feb 21, 2023

@esetnik

  • yes we override the parent base URL with our own domain, but the iframe URL for the styles seems to be the same for styles.css

I'm not understanding what you mean by this. Percy is using the domain https://frontend.local.prodigyems.com to resolve those assets but they are actually hosted under https://local.prodigyems.com. See my screenshot above. The url is https://local.prodigyems.com/css/line-icons/style.css not https://frontend.local.prodigyems.com/css/line-icons/style.css and they do return the correct content-type header.

@itsjwala
Copy link
Contributor

Hey @esetnik

  • I was talking about the base url ( proxyme.percy.io which we use instead of any localhost domain)

We've not changed this behavior - it's the same ref.

  • Apologies, I see the issue now - though there wasn't any change around this bit ^
  • I'm trying to create a repro on my end for this issue, please allow me some time to check this further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@esetnik @itsjwala and others