Possible Z-Order issue when Insert Date widget is clicked

[bletch (Danny Goodall)]

EDIT: Not reproducible on meta - investigating further.

The Issue

Inserting a date and then clicking on the resultant widget causes the panel that is displayed to appear ‘beneath’ any following posts.

Before clicking

After clicking

in case it is not clear from the screen-grab, the orange rectangle is the panel containing the list of timezones for that local time. It clearly goes ‘beneath’ the post below.

To Reproduce

I’m able to reproduce this on our live site under the latest v2.3.0.beta1 +8.

Simply insert a date into a post, then post a reply to the topic so there is at least one post below the post with the date widget on it.

Then click on the date widget to get a list of the equivalent times.

I guess the list of time zones has to be long enough so that the panel that is produced is deeper than the height of the post it is in.

I’ve disabled a bunch of plugins and it still happens, so will try to reproduce it on meta in the posts that follow.

Mobile works

Oddly enough, the same topic when viewed on mobile actually works.

2019-02-01T20:28:00Z

[bletch (Danny Goodall)]

Here goes.

2019-02-01T18:15:00Z

[bletch (Danny Goodall)]

Follow-up post to see if the date panel floats over or under this post.

[bletch (Danny Goodall)]

OK, so this works perfectly on meta.

I’ll do some more investigating to see if I can narrow down what is different about my environment - Theme, perhaps?

[awesomerobot (Kris)]

Very likely theme related, is that the classic theme you’re using?

[bletch (Danny Goodall)]

The screen shots above come from Lightbox.

I’ve tried a couple of themes and they all produce odd results.

Vincent

Default

Grey / Amber

The date panel shows a div.retina with an id of discourse-tooltip. From the brief look I’ve had in dev tools, it doesn’t look like they are being overridden by the theme. The styling appears to come from tooltip.scss.

[bletch (Danny Goodall)]

Not sure if I’m onto something or not, but the Retort plugin seems to set the z-index of the div.topic-body to 3 in retort.scss.

If I use dev tools so that the style is not applied to .topic-post .topic-body, then the date panel behaves as I’d expect.

As I’d mentioned above, I’d already disabled Retorts (due to an error that I’m going to report on a separate thread) but the CSS is obviously still active.

I will try to remove the Retort plugin and rebuild to see if the behaviour is still there.

CC: @gdpelican.