Weird behavior on embed

{
  "browser-info": {
    "language": "en-US",
    "platform": "Linux x86_64",
    "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36",
    "vendor": "Google Inc."
  },
  "system-info": {
    "file.encoding": "UTF-8",
    "java.runtime.name": "OpenJDK Runtime Environment",
    "java.runtime.version": "11.0.10+9",
    "java.vendor": "AdoptOpenJDK",
    "java.vendor.url": "https://adoptopenjdk.net/",
    "java.version": "11.0.10",
    "java.vm.name": "OpenJDK 64-Bit Server VM",
    "java.vm.version": "11.0.10+9",
    "os.name": "Linux",
    "os.version": "4.15.0-1051-aws",
    "user.language": "en",
    "user.timezone": "GMT"
  },
  "metabase-info": {
    "databases": [
      "h2",
      "mysql"
    ],
    "hosting-env": "unknown",
    "application-database": "h2",
    "application-database-details": {
      "database": {
        "name": "H2",
        "version": "1.4.197 (2018-03-18)"
      },
      "jdbc-driver": {
        "name": "H2 JDBC Driver",
        "version": "1.4.197 (2018-03-18)"
      }
    },
    "run-mode": "prod",
    "version": {
      "date": "2021-01-26",
      "tag": "v0.37.8",
      "branch": "release-x.37.x",
      "hash": "490cea7"
    },
    "settings": {
      "report-timezone": null
    }
  }
}

I’ve been able to succesfully setup metabase and create a few questions and a dashboard. I’ve enabled embed and when I access the embed’s link, it shows up correctly. However, when I try to use this link as an iframe src, something strange is happening.

The embed never shows up on the screen, but I have inspected the DOM, and the iframe is there, but with it’s absolute positioned and has a style of left: -10000px. I tried using this embed on a blank react project and the same thing happened.

I was wondering i this could be something related to metabase itself, and not my project.

If anyone has been throught this before, or has any idea of what might be the cause of this weird behavior, it would be of great help.

Hi @fempyrean
I would think it’s something in your project - haven’t heard about that before.
Have you seen the reference examples? https://github.com/metabase/embedding-reference-apps
Also, if you’re using Metabase, then migrate away from H2:
https://www.metabase.com/docs/latest/operations-guide/migrating-from-h2.html

I don’t think how it could be related to metabase, but I decided to ask just in case. The weird thing is that I created a new react project just to see if the iframe would work, but the problem was still present.

This made me think that, possibly, the problem wasn’t related to react or my project, since the problem was also present in the new project. I might me missing something, tho.

And thanks for the link, I’ll check it out.

@fempyrean Make sure you don’t have any reverse-proxy doing funny stuff - or browser extensions.
It can cause the weirdest problems that you can use many days on trying to troubleshoot until you find the problem and then write about (speaking from experience):
https://www.metabase.com/docs/latest/troubleshooting-guide/proxies.html