# 点击插入日期小部件时可能出现 Z 轴顺序问题

**URL:** https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154
**Category:** Bug
**Created:** [2019年二月1日 20:18 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154 "2019-02-01T20:18:25Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 20:18 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/1 "2019-02-01T20:18:25Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/d/1/d1a47070c14f6fb10ca9f447178cc64c2bb4c80b.png)

### After clicking

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/5/55c6256324d20ec1e3b6b5f7d7c29a712d243b05.png)

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](https://global.discourse-cdn.com/meta/original/3X/3/9/3915257a11c1f50e6c213b31e3f904d9249799aa.png)

# To Reproduce

I’m able to reproduce this on our live site under the latest [v2.3.0.beta1 +8](https://github.com/discourse/discourse/compare/925606f8b14d334e21c03e7205c1f790013ee6fd...tests-passed).

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](https://global.discourse-cdn.com/meta/original/3X/d/5/d5cda508d1e57fa79ab156d7d43398e1d0d4f6a5.jpeg)

2019-02-01T20:28:00Z

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 20:18 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/2 "2019-02-01T20:18:55Z")

</div>

Here goes.

2019-02-01T18:15:00Z

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 20:19 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/3 "2019-02-01T20:19:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 20:20 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/4 "2019-02-01T20:20:09Z")

</div>

OK, so this works perfectly on meta.

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/9/a969ff88019f84680b4128a6743ed9d25182c207.png)

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2019年二月1日 20:32 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/5 "2019-02-01T20:32:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 20:44 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/6 "2019-02-01T20:44:03Z")

</div>

The screen shots above come from Lightbox.

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

### Vincent

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/5/255957af08500cb852700ff1f2b7a902ead2794e.png)

### Default

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/8/1808f8af558ef22605dbcc6f24504fca59946c8f.png)

### Grey / Amber

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/f/bf1c9953dc88525a3ade2204cfcedd9706bfcc4b.png)

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`.

---

<div class="post-metadata">

### Author: ![bletch](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bletch/32/69088_2.png) [@bletch](https://meta.discourse.org/u/bletch)
#### Post date: [2019年二月1日 21:21 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/7 "2019-02-01T21:21:03Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/5/a/5a43297b0622ac463d6d7c82641c533eb8c76f92.png)

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.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2019年二月2日 01:34 UTC](https://meta.discourse.org/t/possible-z-order-issue-when-insert-date-widget-is-clicked/108154/8 "2019-02-02T01:34:35Z")

</div>


