I have an iframe container on my page that loads a map when i click on a button. And for some reason, when the map loads it causes surrounding objects to go blurry.
Example: https://i.postimg.cc/xCfJWwZG/beforeafter.png
I have tried adding -webkit-font-smoothing: subpixel-antialiased; to various things in the CSS and transform: scale(1.0) translate3d(0,0,0); which only makes the objects permanently blurry. How do i stop the iframe from screwing up my page.
Adding it as an answer so that people looking for similar problem will find it.
Sometimes the content of the iframe has absolutely positioned elements inside that due to css positioning might take up the whole screen if the iframe is not positioned relative to some container.
So it seems in this case this is the problem.
So try to wrap the iframe in a container and set its position:relative to fix it.
