The title sums up the problem pretty well...
I am trying to integrate Mopub ads into my web app. I have pasted the javascript code into the location I want the ads to display within, and the initial test ad is showing up just fine.
The problem is that when I have the script there, and the ad loads, all of the text in my web app appears at about 2/3 or half the size that it should be.
If I remove the Mopub script, the text shows up in the correct size again.
It seems like something in the script is causing the CSS to be overwritten, but I took a look at all of the scripts being called, and didn't see anything suspicious in them.
Does anyone have an idea why this is happening?
Update:
So I figured out what's going on. The script injects an HTML demo ad that contains some CSS within style tags, which includes a body style that resets the font size from 16px to 12px.
Because I am using ems for all of my measurements, and since the script is injected at the bottom of the page, it's overriding my CSS.
Is there any way to sandbox the Mopub script so it's CSS cannot override mine?
Some sort of iframe shenanigans?
For now, I have just succumbed to !important.
If I add it to the stylesheet containing the body font-size styles, the Mopub script won't override it, as it is right now.
body {
font-size: 16px !important;
}
This feels like a hack though, if there is a better way to accomplish this, someone please post it here.
I have a feeling that this is also only a problem with the Mopub test script, but I'm not willing to bet on that, and don't like the idea of arbitrary injected code overriding the app CSS.
Update:
I made another file containing the ad code and sandboxed that shit in an iframe. Apparently Mopub lets publishers throw whatever CSS they want in their HTML creatives via style tags. Wacky.
If anyone else comes across this with the same problem, I'd recommend using an iframe-based approach so your site styles don't get hijacked by unwitting or rogue publishers.