Possible Z-Order issue when Insert Date widget is clicked

Contribute Bug

AI-generated summary

A possible Z-Order issue has been reported when the Insert Date widget is clicked. The issue is that the panel displaying the list of timezones appears ‘beneath’ any following posts.

To reproduce, insert a date into a post, post a reply below, and then click on the date widget. The issue is reproducible on a live site running Discourse v2.3.0.beta1 +8. However, the issue does not occur on mobile.

After investigation, it appears that the issue may be theme-related, but disabling several themes did not resolve the issue. awesomerobot suggested that the issue is likely theme-related, and bletch confirmed that the issue occurs with multiple themes, including Lightbox, Vincent, Default, and Grey/Amber.

Further investigation revealed that the Retort plugin sets the z-index of the div.topic-body to 3, which may be causing the issue. Disabling the Retort plugin’s CSS resolves the issue, and removing the plugin and rebuilding the site is being tried to confirm the fix.

bletch has identified the potential cause and is working to resolve the issue.

1

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

image
image1300×798 92 KB

After clicking

image
image1294×845 107 KB

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.

image
image1294×845 108 KB

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.

image
image533×947 98.5 KB

2019-02-01T20:28:00Z

2

Here goes.

2019-02-01T18:15:00Z

3

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

4

OK, so this works perfectly on meta.

image
image1306×923 114 KB

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

5

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

1 Like
6

The screen shots above come from Lightbox.

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

Vincent

image
image491×833 60.1 KB

Default

image
image546×842 107 KB

Grey / Amber

image
image679×917 135 KB

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.

1 Like
7

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.

image
image544×911 105 KB

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.

1 Like