Why is there horizontal scrollbar container when there is no scrollbar? (Open Image in a New Tab)
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)
- Why is a vertical scrollbar container visible, when there is no scrollbar on the page on any element
- 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.