There is an element having fixed height on my DOM with height more than body and html document and page is scrollable but its impacting my content. If you disable overflow-x either on html or body, it will work fine. Not able to figure out how overflow-x is impacting overflow-y condition.
As per below code snippet, the content of second column is hidden half way due to oveflow-x property on html or body.
Using below css on page.
body, html{
overflow-x: hidden;
height: 100%;
}
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body, html{
height: 100%;
overflow-x: hidden;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>Note: I am looking for explanation of this issue (as why this is happening so that I can learn for future) not the fix of the issue. (by hit and trial different css fields).
