Ipad Safari 100% Height Issue

iPad Safari 100% height issue

Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.

Height: 100% Stopped Working When Run in Safari

For the first part of your question, making sure the green div aligns where you want, the answer is to make sure your CSS is working the way in production that you think it is.

Here's how to do that:

If something contextual is overriding your CSS or if there is another CSS source loading after yours, you can find out what is ruining it by inspecting the element using devtools in your browser.

It will show the hierarchy of applied CSS and you will be able to see and test what is overriding your CSS example, and find the source.

Check your interposed DIV (class MF6) between your flex-row and flex-col, you may need to put the flex-col as a direct descendent of the flex-row.

Also, some side notes that may be helpful as well:

• You have some inline CSS which may be better served with classes as well, depending on your exact situation
• Check out flex-end

For your second issue (not working on Safari), the answer is to make sure you have all the -webkit prefixes needed:

• You may need a -webkit prefix somewhere in there if you are getting results elsewhere but not in safari.

• You used to need display: -webkit-flex; to augment your display: flex;, not sure if still the case.

Chrome / Safari not filling 100% height of flex parent

Solution

Use nested flex containers.

Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through.

Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent.

Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation).

Try this (no changes to HTML):

.container {    display: flex;    flex-direction: column;    height: 20em;    border: 5px solid black}
.item {    display: flex;                      /* new; nested flex container */    flex: 1;    border-bottom: 1px solid white;}
.item-inner {    display: flex;                      /* new; nested flex container */    flex: 1;                            /* new */
    /* height: 100%;                    <-- remove; unnecessary */    /* width: 100%;                     <-- remove; unnecessary */    /* display: table;                  <-- remove; unnecessary */  }
a {    display: flex;                      /* new; nested flex container */    flex: 1;                            /* new */    align-items: center;                /* new; vertically center text */    background: orange;
    /* display: table-cell;             <-- remove; unnecessary */    /* vertical-align: middle;          <-- remove; unnecessary */}

<div class="container">  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div>
  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div>
  <div class="item">    <div class="item-inner">      <a>Button</a>    </div>  </div></div>

CSS height 100% not working in ipad browser

Sometimes height and min-height will not work on ipad and safari browsers. You can use display:flex follow flexbox group to align equal column height as below example.

.row.mycolspce div[class^="col-"] {    display: flex;    flex-wrap: wrap;}.feature-imgitem img {  object-fit:cover;}.feature-imgitem,.banner_effect {  display:flex;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><div class="container">      <div class="row mycolspce">          <div class="col-md-6">              <div class="feature-imgitem">                  <a class="banner_effect" href="#">                      <img src="http://orderonline.my/demo.mybizcart/img/new-product1.jpg" class="img-fluid w-100" alt="fc-collection">                  </a>              </div>          </div>          <div class="col-md-6">              <div class="feature-imgitem">                  <a class="banner_effect" href="#">                      <img src="http://orderonline.my/demo.mybizcart/img/fc-collection2.jpg" class="img-fluid w-100" alt="fc-collection">                  </a>              </div>              <div class="row mt-4">                                    <div class="col-md-6">                      <div class="feature-imgitem">                          <a class="banner_effect" href="#">                              <img src="http://orderonline.my/demo.mybizcart/img/fc-collection3.jpg" class="img-fluid w-100" alt="fc-collection">                          </a>                      </div>                  </div>                  <div class="col-md-6">                      <div class="feature-imgitem">                          <a class="banner_effect" href="#">                              <img src="http://orderonline.my/demo.mybizcart/img/fc-collection4.jpg" class="img-fluid w-100" alt="fc-collection">                          </a>                      </div>                  </div>              </div>          </div>      </div>   </div>

Safari 100% height and width exception

Use height:auto; instead which I find works just as well and doesn't cause this issue in Safari.

---

Related Topics