In our webapp, our users can draft their personal page using a rich text editor. We implemented a custom plugin so that they can add a cover image of their choice. They can actually choose two of them: for desktop and for mobile.
The editor is in an iframe and when the user clicks the button to add their cover page, this gets added to the content:
<div id="cover" style="display: block; height: 682px;">
<style>
#cover {
background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('cover.jpg') !important;
}
@media (max-width: 767px) {
#cover {
background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
url('cover-mobile.jpg') !important;
}
}
</style>
</div>
The #cover markup is very important because that's how the editor parses the content and identifies that whole block as a cover block around which the custom editor plugin logic is built (when you click it you can edit it, change the cover, set its size, and some other options). This is the reason the <style> tag needs to be within #cover, otherwise if it just gets appended to <head> it will no longer be identified as part of the cover content and we won't be able to work with that. The point is that if the content is related to the cover block, it can't be outside the #cover div in its natural place: <head>.
When the user saves their draft it gets saved in our database and the published version of the page will show that content. And here's the problem: it seems some browsers (i.e. Firefox) strip <style> tags within HTML blocks that are not <head>. It gets rendered as follows:
<div id="cover" style="display: block; height: 682px;"></div>
And the whole <style> part is missing, so the cover set up by the user is not shown at all.
Ideally, I wouldn't be using <style> at all and just save the content as inline CSS, but it turns out media queries can't be inline and we have this cover image rule that we need.
How can I work around this?
question from:
https://stackoverflow.com/questions/65870182/dealing-with-media-rules-that-cant-be-in-head 
