[Webkit-unassigned] [Bug 172234] New: Chrome and Firefox vs Safari. Flexbox and CSSGrid strange affair.

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=172234

            Bug ID: 172234
           Summary: Chrome and Firefox vs Safari. Flexbox and CSSGrid
                    strange affair.
           Product: WebKit
           Version: Safari 10
          Hardware: All
                OS: All
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: myfele at duck2.club

Created attachment 310419

  --> https://bugs.webkit.org/attachment.cgi?id=310419&action=review

First and second screen. Chrome and Safari.

I have this situation: https://jsfiddle.net/johnsam/rdtva2fq/

On **Chrome** it works good, see the first image.

It start (see "FIRST" and "LAST" btn). Good.

On **Safari** it doesn't (also with iPad/iPhone, it's the same) see the second image.

"FIRST" btn OK, "LAST" one nope. The page has a scrollbar that is what I don't want!

**If I remove the header part it works good, so my guess is Safari doesn't recognize the (`height: 100vh` MINUS the header part of that height) maybe.
I'm right?**

Code:

    <div class="my-all d-flex flex-column height100">
      <div class="container-fluid" style="background: red;">
        <div class="row">
          <div class="col-12 my-5">
            Test space long long long
          </div>
        </div>
      </div>
      <div class="my-main d-flex height100" style="background: cyan;">
        <div class="container-fluid d-flex media-body">
          <div class="row my-row my-3">
            <div class="col-6 my-grid">
              <a class="btn btn-secondary my-btn">
                <span>FIRST</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

  [1]: https://i.stack.imgur.com/77Sz0.png
  [2]: https://i.stack.imgur.com/dCCNN.png

Question on StackOverflow: http://stackoverflow.com/questions/44025290/flexbox-strange-behaviour-with-cssgrid

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170517/237e93ee/attachment.html>