Closed
Description
Hello,
I noticed an issue in the way the .sr-only class is processed when it is placed in an overflow: auto; div and its original location would have been below the screen bottom (for instance in a case of a div with a bigger height than the screen resolution).
Here is an example of the behaviour I'm talking about (assuming the css and js Boosted files are located in appropriate subfolders):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
Copyright © 2014 Monotype Imaging Inc. All rights reserved.
Orange Company had buy the right for used Helvetica onto digital applications.
If you are not autorized to used it, don't include the orangeHelvetica.css
See NOTICE.txt for more informations.
-->
<link rel="stylesheet" href="css/orangeHelvetica.css" />
<!--
Orange Icons
Copyright (C) 2016 - 2018 Orange SA All rights reserved
See NOTICE.txt for more informations.
-->
<link rel="stylesheet" href="css/orangeIcons.css" />
<!-- Boosted CSS -->
<link rel="stylesheet" href="css/boosted.css">
<style media="screen" type="text/css">
.test-external {
height: 50vh;
width: 400px;
background-color: #f16e00;
overflow: auto;
}
.test-internal {
margin: 0 auto;
height: 150vh;
width: 300px;
background-color: #4BB4E6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.test-bottom-div {
background-color: #32c832;
}
</style>
<title>Test .sr-only</title>
</head>
<body>
<div class="test-external">
<h3>
Test without fix
</h3>
<div class="test-internal">
<div class="test-bottom-div">
<span class="sr-only">Text for screen reader</span>
<span aria-hidden="true">Text for standard screen</span>
</div>
</div
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Boosted JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/boosted.js"></script>
</body>
</html>When opening this page, you can see that there is an overflow on the external div as expected, but there also is an overflow on the whole page which is not intended. This second overflow is due to the .sr-only class.
However I found a fix studying the .visuallyhidden example from this page:
if you add margin: -1px; to the .sr-only class, it behaves as expected.
Here is an example featuring the fix:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
Copyright © 2014 Monotype Imaging Inc. All rights reserved.
Orange Company had buy the right for used Helvetica onto digital applications.
If you are not autorized to used it, don't include the orangeHelvetica.css
See NOTICE.txt for more informations.
-->
<link rel="stylesheet" href="css/orangeHelvetica.css" />
<!--
Orange Icons
Copyright (C) 2016 - 2018 Orange SA All rights reserved
See NOTICE.txt for more informations.
-->
<link rel="stylesheet" href="css/orangeIcons.css" />
<!-- Boosted CSS -->
<link rel="stylesheet" href="css/boosted.css">
<style media="screen" type="text/css">
.test-external {
height: 50vh;
width: 400px;
background-color: #f16e00;
overflow: auto;
}
.test-internal {
margin: 0 auto;
height: 150vh;
width: 300px;
background-color: #4BB4E6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.test-bottom-div {
background-color: #32c832;
}
.sr-only {
margin: -1px;
}
</style>
<title>Test .sr-only</title>
</head>
<body>
<div class="test-external">
<h3>
Test with fix
</h3>
<div class="test-internal">
<div class="test-bottom-div">
<span class="sr-only">Text for screen reader</span>
<span aria-hidden="true">Text for standard screen</span>
</div>
</div
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Boosted JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="js/boosted.js"></script>
</body>
</html>Test with Boosted 4.0.1 on Chrome 64
I hope this will help you fix this unexpected behaviour.
Have a nice day.