2

So I have a div which is positioned absolute at the bottom left of my site.
When I open the site through <a target="_blank" href="./index.html"> in new tab, the bottom value is not getting applied well.

<style>
    .mybox{
        width: 150px;
        height: 200px;
        background-color: red;
        position: absolute;
        bottom: 70px;
        left: 30px;
    }
</style>

<a href="./index.html" target="_blank">Click me</a>

<div class="mybox"></div>

Here is the demo link : https://brave-jennings-05f329.netlify.app/.

Steps to reproduce:

  1. Open the link in iphone+chrome.
  2. You will see red box at the bottom. (that is correct)
  3. Click on the clickme button at top left, it will redirect to same site in new tab.
  4. You will see that the red box is below the bottom of the screen now. (this is issue)

Thank you.

Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Ishwar Rimal
  • 1,071
  • 11
  • 19

1 Answers1

0

Similar question here but doesn't really address absolute positioning - so have copied my answer - Chrome on iPhone overflows content on empty page (on new tab only, not reload)

A solution I found regarding absolute positioning - within Chrome on iOS it appears the window.innerHeight initialises with the fullscreen height, then switches to height between the address bar and bottom toolbar shortly after (approx 100ms or so). In my case was 667px and 553px respectively.

If you programatically pass the window.innerHeight into the height of the parent element of the app to make the height of the app the same as the inner height, as well as giving the top element position: relative;, all children of this element with the styling position: absolute; will have their position relative to this parent element, NOT the webpage.

It doesn't solve the issue of having the excess height below the content, but it solves the absolute positioning.

HTH.

Harry Fry
  • 21
  • 5