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?

  • Did you resort to just overriding them in your local stylesheet?
    – daveespo
    Oct 25, 2016 at 2:36

3 Answers 3


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).

  • Have you figured this out?
    – Coova
    May 24, 2019 at 18:09

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.

function load()
    window.removeEventListener('load', load, false);

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');

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .