October: Mail style messed up CMS style

[EbashuOnHolidays]

Hi! In section of settings 'Mail configuration', I am select 'Mail method' - 'Log file'. When I sent the letter and went into the logs - I saw this:

Mail style messed up CMS style. In the bottom of this page - I saw HTML layout of this email with CSS styles

[LukeTowers]

Perhaps we need to load the Mail preview in an iframe to isolate it from the main October instance?
I did something similar with a client project before, it's not too much work.

[EbashuOnHolidays]

I think so, but it's up to you

[daftspunk]

@dshoreman introduced this a while back, I knew it would be an issue but haven't gotten around to fixing it yet. We can use shadow DOM for this.

var content = "<strong>I am in a shadow DOM..... Yayyyyy!</strong>"
content += "<style> body { background: red; } </style>"

var el = $('div').get(0)
var shadow = el.attachShadow({ mode: 'open' })
shadow.innerHTML = content

[LukeTowers]

@daftspunk I like that idea, using shadow DOM sounds good to me. Don't have time to implement it myself at the moment but my vote's for that route

[munxar]

@LukeTowers @daftspunk Be aware that shadow DOM right now just works in chrome, opera and android -> shadow dom.

iframes on the other hand, work in every stupid browser on earth . I'm not a fan of windows, but a lot of our customers (backend users) use IE 11 or Edge. Don't ignore them, or force to use chrome, their company policy doesn't allow to use different browsers.

[daftspunk]

With regards to @munxar's comments. We either fail gracefully (disable the tab all together) or we should copy the iframe logic found on the Mail Brand Settings page. I'm not in favor of mixing DOM and iframe in the same solution. The iframe logic in Mail Brand Settings is more complex but it is my preferred choice with consideration to older browsers.

[LukeTowers]

@daftspunk let's go with the iframe logic. As a note, this is in the preview of a log generated by sending an email while mail settings are set to log.