My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Why is there horizontal scrollbar container when there is no scrollbar? (Open Image in a New Tab)

Arihant's photo
Arihant
·Feb 14, 2017

Screen Shot 2017-02-15 at 2.23.08 AM

I'm using Gatsby Static Site Generator to build a static portfolio site.

React Component markup looks like

      <div>
        <Helmet
          title={config.siteTitle}
          meta={[
            {"name": "description", "content": "Sample"},
            {"name": "keywords", "content": "sample, something"},
          ]}
           style={[
              {type: "text/css", cssText: homepageSVGStylesDesk}
          ]}
        />

        <div className="home-page-container" dangerouslySetInnerHTML={createHomepageSVGMarkup()}></div>
    </div>
import homepageSVGDesk, { homepageSVGStylesDesk } from './assets/images/homepageSVG-desk';

function createHomepageSVGMarkup(){
  return {__html: homepageSVGDesk}; // homepageSVGDesk is a serialised SVG markup string
}

I'm not able to figure out two things (Please open the image in a new tab to see what I'm talking about)

  1. Why is a vertical scrollbar container visible, when there is no scrollbar on the page on any element
  2. Why is SVG not scaling the full height as well, I've viewBox="0 0 1920 1080"set in the SVG + preserveAspectRatio hasn't been set, so it should be taking the default, scaling it automatically.

Help / Hints will be much appreciated.