Vaadin Valo ComboBox miss aligning the dropdown on Firefox.

Attached is an image of issue I am experincing in Firefox only. ( MacOS Sierra Firefox 51.0.1 (64-bit) ) The arrow below is where I clicked the button and the arrow above is where the dropdown box is appearing.

Here are a few of the things I know. We have our website set to scroll body {overflow: auto;}. The dropdowns are working perfectly in FIrefox until you scroll down the page. Once you scroll down the page the calculation of where the dropdown box should appear is incorrect causing the problem that we are seeing in the screenshot.

This is working perfect in Safari and Google Chrome.

I also did some digging through the vaadin code and found this:

[code]
topPosition = toInt32(WidgetUtil
.getBoundingClientRect(tb.getElement()).getBottom())

This looks like some javascript that is calculating the posistioning of where the dropdown box will appear. I also found there to be inconsistencies in the way Firefox calculates scrollTop. Look at this JSfiddle
http://jsfiddle.net/RBBw5/6/
Open it up in all 3 browsers (Chrome, Firefox, Safari). Firefox calcualtes HTML and body differently than the other two. I am not sure if this is what is causing it or not.

I have found a work around by applying the overflow to the .v-ui and setting the height to 100% but that is causing the boxes to stay on the screen as you use your mouse to scroll down the page. It is better than the attached example but it still isn’t ideal.

Any ideas on why this might be happening or things to try would be greatly appricaited.
33702.png

Hi,

Have you filed a ticket about this to github.com/vaadin/framework/issues?

-Olli

I have not, I wanted to reach out here to see if this is something that is a bug or if I am just using it incorrectly. I think I might file an issue. I am new to Vaadin and the community so I wasn’t sure what to do.

-Evan

Yeah, file a ticket if you think there’s a bug - different behavior on different browsers sounds like a bug in most cases. Normal bug reporting etiquette applies: check if there’s an existing ticket, attach a small sample project (if possible) and describe your issue, including all relevant version numbers. Forum posts have a tendency of getting lost to the mists of time.

-Olli