search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.92k stars 3.52k forks source link

[v1][bug] css style on body "calc(100vh.." causes y-scrollbar on some browsers #3956

Closed qyloxe closed 5 years ago

qyloxe commented 5 years ago

Software version

Quasar: 1.0.0-beta.18 @quasar/app (v1+ only): 1.0.0-beta.19 Any other software related to your bug: desktop webkit browsers

What did you get as the error?

in specific q-layout/q-page-container/q-page/q-header configurations browser opens right scrollbar (native)

What were you expecting?

when using q-layout and q-page-container and q-page and q-header - no native y-scrollbars under any circumstances

What steps did you take, to get the error?

Well, there is quite a freedom for developer in using q-layout with q-page especially when one wants to use flex rows and columns. In specific situations, when there is q-header involved, the height of the q-page element (<main> in html) is calculated using a specific css "calc" formula. This formula appears to have a bug, which causes on webkit desktop browser appearance of y-scrollbar.

quasar sets something like this in "main" html tag:

<main class="q-page" style="min-height: calc(100vh - 50px);">

The above calculation is as I understand dynamically adjusted whether there is header or footer. In example above, the header is set at 50px, so quasar thinks that the height of the page should be equal to 100vh minus height of the header (50px).

Unfortunately, using 100vh in some browsers is returning value with height of the page scrollbar which leads to bad result and appearance of the scrollbar (because height of the page is set to bigger value than viewport height).

It is of course more complicated, because it depends on the browser, on the body css overflow and maybe some other things. The specific knowledge about vh calculations and scrollbars is here:

https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar

In link above is a quite simple and portable solution - one needs only substract the height of the scrollbar and voilla - the formula is correct. In above example it would look like this:

min-height: calc(100vh - (100vh - 100%) - 50px);

why (100vh - 100%)? becuase 100vh could give different results in different situations but 100% always gives the height including scrollbars. So this additional formula always gives us a proper scrollbar height.

This works, BUT there are some considerations:

  1. I am quite convinced, that this "bug" appears when one doesnt really read quasar documentation, because adding css classes "flex" or "row" to q-page element in most situations causes the scrollbars to disappear.

  2. BUT this min-height formula should use the scrollbar height, because it is elegant, so in spite of "correct quasar way" of adding by the developer specific css classes (flex, row) to q-page element, the quasar should do the right thing on its own.

  3. I understand, that the q-layout could be used not only on the main BODY element but also in dialogs or even other configurations. In such situation additional care must be taken, because when we want to get rid of page y-scrollbar, it is ok to use (100vh - 100%) because this 100% is always a height of the whole browser page (viewport). BUT when q-layout and q-page could be used in q-dialog then this 100% would be just a height of the parent element, so in this situation this css calc formula shouldn't have a subtraction of y-scrollbar height.

  4. I think it should be discussed and somewhat tested, but I couldn't find a codepen or jsfiddle which would work with q-layout/q-page on the html/body level. Besides I'm sure core developers would just know what this is about and where to look. It is quite visually annoying situation, when there is suddenly a native browser scrollbar on usually beautiful page, Thats why, IMHO it should be somehow dealt with, on the quasar level.

pdanpdan commented 5 years ago

So min-height: calc(100vh - (100vh - 100%) - 50px), that is 100% - 50px is the new 42?

qyloxe commented 5 years ago

So min-height: calc(100vh - (100vh - 100%) - 50px), that is 100% - 50px is the new 42?

Please look at the stackoverflow link I attached. There is answer to your question (in comments).

Basically - css calc is working slightly different. It is rather a physics formula than a math formula, so you need to firstly consider units - in this example everything is calculated in pixels. If it would be otherwise, than you could also argue about reducing letters "n" in "sin/tan" formula :-)

rstoenescu commented 5 years ago

@qyloxe Hi,

Thanks for opening the discussion and providing a detailed explanation. Much appreciate it.

Tested with the new version, but unfortunately it can't cover all possible use cases. Furthermore it adds a dependency on all node parents of QPage to have height: 100% which Quasar cannot ensure.

However, if this formula works for you, please use the the style-fn prop on QPage.