Additional styles added to body tag in Lightning

Question

In Lightning, we're getting some additional styles added to our body tag:

html body.sfdcBody {
    font-family: 'Helvetica';
    color: #3c3d3e;
    background: none transparent;
    margin: 0;
    padding: 10px 20px 0 20px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

Coming from AuraAlohaContentFrame.css.

I raised an issue with the Lightning design guys, but they tell me it's not their doing.

the AuraAlohaContentFrame.css is not related to the Lightning Design System's CSS. I'm unsure of whether that may change or not.

We're reluctant to overwrite SF styles out of hand.

Would anyone have any extra information on these styles and why they're taking effect?

Answer 1

I'm sure you have figured out the resolution by now, but I am adding this comment, in case someone else lands up here.

In my case: The AuraAlohaContentFrame.css was applied due to the ltng:out on a VF page. If you're running into this problem on SF1, you've likely added a VF page with lightning out to SF1 Navigation config, instead of the lightning tab that loads the lightning app directly (without lightning out).

Answer 2

I faced the same issue and in my case i completely removed the class from body tag on load. or you can override any property considering your case scenarios.

window.addEventListener(
'load',
function load()
{
    window.removeEventListener('load', load, false);
    document.body.classList.remove('sfdcBody');
},
false);

Answer 3

We can override the overflow by using the query selector. It worked for me. Please find the code for the same.

var overflow = document.querySelector("body");
overflow.setAttribute('style', 'overflow-x: initial !important; overflow-y: initial !important');