Created
January 8, 2019 13:42
-
-
Save makotom/75fa7015c0fad7f1d4d997870ddef1fd to your computer and use it in GitHub Desktop.
Navigation within a box is not reproduced by back/next functionality in UA
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<meta charset="UTF-8"> | |
<title>Intra-page jump</title> | |
<style> | |
body { | |
position: absolute; | |
height: 1000vh; | |
} | |
p#bottom { | |
position: absolute; | |
bottom: 0; | |
} | |
div#box { | |
position: absolute; | |
width: 90vw; | |
height: 50vh; | |
background-color: rgba(0, 0, 0, 0.2); | |
overflow: auto; | |
} | |
p#boxButtom { | |
position: absolute; | |
top: 1000vh; | |
} | |
</style> | |
<main> | |
<h1>Navigation within a box is not reproduced by back/next functionality in UA</h1> | |
<h2>Repro</h2> | |
<ol> | |
<li>Navigate to <code>#boxButtom</code> (using the hyperlink with a label <q>Go to the other end</q>, located at the top of the gray box)</li> | |
<li>Navigate to <code>#boxTop</code> (using the hyperlink with a label <q>Go <em>back</em> to the other end</q> located at the bottom of the gray box)</li> | |
<li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li> | |
</ol> | |
<h2>Expected result</h2> | |
<p>The text <q>At the bottom of the box</q> should be made visible through the scrolling mechanism of the UA.</p> | |
<h2>Actual result</h2> | |
<p>The text <q>At the bottom of the box</q> is not visible.</p> | |
<h2>Comparison</h2> | |
<p>The following procedure works as expected, and <q>The bottom</q> is visible.</p> | |
<ol> | |
<li>Navigate to <code>#buttom</code> (using the hyperlink located below)</li> | |
<li>Navigate to <code>#top</code> (using the hyperlink located at the bottom of this page)</li> | |
<li>Going back to the previous page with a functionality provided by UA (i.e. "Back" button in your browser)</li> | |
</ol> | |
</main> | |
<hr> | |
<p id="top">On the top.</p> | |
<p><a href="#bottom">To the page bottom</a>.</p> | |
<div id="box"> | |
<p id="boxTop">At the top of the box. <a href="#boxButtom">Go to the other end</a>.</p> | |
<p id="boxButtom">At the bottom of the box. <a href="#boxTop">Go <em>back</em> to the other end</a>.</p> | |
</div> | |
<p id="bottom">The bottom. <a href="#top">To the top</a>.</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment