quasar

quasar copied to clipboard

Describe the bug Using a QInput to model a date with QDate and QTime inside a popup proxy. When viewing this on a darker background you notice a small white edge at the top-left and top-right corner.

Codepen/jsFiddle/Codesandbox (required or your issue may be closed) https://codepen.io/Mett-codepens/pen/QWqGYWa?editors=1010

To Reproduce Change the date or time by clicking on the icons. Check the top-left and top-right edges of the popup. This background seems to come from the q-menu styling background: #fff. Together with the border-top-left-radius: inherit and border-top-right-radius: inherit this seems to be causing issues.

Expected behavior No white edges there :)

Screenshots

Platform (please complete the following information): Quasar Version: 3.2.4 @quasar/app Version:

OS: Windows Browsers: Firefox (v95) and Chrome(v96)

Unfortunately this is a glitch with the border radius on Chrome. You can see the same with QDate/QTime in page: https://codepen.io/pdanpdan/pen/yLzVrYM?editors=1000

You can try and use square borders, or if somebody finds a solution we'll fix it.

@pdanpdan I have it on Firefox, Chrome and Edge at least, so it's not limited to Chrome. Removing the border-top-left-radius: inherit and border-top-right-radius: inherit and applying the background: #fff on the first child of .q-menu instead of .q-menu itself solves the problem for me while still keeping the same visual appearance.

It doesn't look like it's going to be fixed soon: https://bugs.chromium.org/p/chromium/issues/detail?id=1211455 https://bugs.chromium.org/p/chromium/issues/detail?id=977433 https://bugs.chromium.org/p/chromium/issues/detail?id=805495 https://bugs.chromium.org/p/chromium/issues/detail?id=491574 https://bugs.chromium.org/p/chromium/issues/detail?id=157102

Is this fixed?