Sometimes bubbling stops working on Safari

[R1ze13]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/vue-safari-error-tg4mm

Steps to reproduce

The bug reproduction is quite specific, so please be patient

• open "App.vue" in safari (my version is 13.0.4 (15608.4.9.1.3))
• open the console so that you can watch the logs (the values ​​of "e.TimeStamp" and "attachedTimestamp" from https://github.com/vuejs/vue/blob/dev/dist/vue.esm.js#L7549 are logged)
• make sure that the variable "WITH_GENERATE_NEW_VUE" is false
• wait a while. at least about a minute
• click the "Press me" button several times to make sure that everything works. most likely, in the console there will be "e.timeStamp, attachTimestamp 0 0"

Now the difficult and not completely clear part

• change the value of the variable "WITH_GENERATE_NEW_VUE" to true
• without reloading the browser page, click on the button
• now, most likely, the log will change to something similar to "e.timeStamp, attachedTimestamp 0 51478"
• this is Safari and "e.timeStamp" (the first number in the logs) is zero, but after some time or a few clicks, it will begin to grow and now until it becomes more than the value of "attachedTimestamp", the click will not work

What is expected?

click and method on it works

What is actually happening?

in the above case, this check is not performed
https://github.com/vuejs/vue/blob/dev/dist/vue.esm.js#L7549

---

This is a specific situation - something like emulating an application in which there is a lot of legacy. different sections can be written on different technologies and sometimes this bug is caught when switching between sections. Unfortunately, I can’t even suggest how this bug is related to the instantiation of a new vue, maybe this is a coincidence

I think this can be fixed by adding "e.target.contains (e.currentTarget)" to the conditions specified in https://github.com/vuejs/vue/blob/dev/dist/vue.esm.js#L7549 but I don’t know if this will not affect performance

[LinusBorg]

Seems to be result of a bug in safari. Basically, the event.timestamp should never be 0, and it seems to be for Safari. It's not in other browsers.

Someone else came across something similar in vanilla js:

https://stackoverflow.com/questions/57744414/safari-event-timestamp-is-0

This is the only info in that direction that i could find quickly.

Basically, the event.timestamp should never be 0, and it seems to be for Safari. It's not in other browsers.

[R1ze13]

Yes, you are right, this is an error exclusively in safari, but the case with a zero value is taken into account in the conditions. https://github.com/vuejs/vue/blob/dev/dist/vue.esm.js#L7559
The error occurs when zero for some reason starts to grow

[rx-837]

@LinusBorg as can I see you use chain of next rules:

// crutch
e.target === e.currentTarget

// primary rule
e.timeStamp >= attachedTimestamp

// crutch
e.timeStamp <= 0

// crutch
e.target.ownerDocument !== document

Otherwise result is false, and event handler doesn't runs.

If you rely to timestamp rule why you not using e.timeStamp >= attachedTimestamp the first?

Rule e.target === e.currentTarget doesn't works in this case:

<button type="button" v-on:click="myAwesomeHandler">
    <i class="fa fa-bars"></I>&nbsp;Menu
</button>

In this case when i make click on icon the e.target and e.currentTarget will be different.

I think the chain will should look like this:

// primary rule
e.timeStamp >= attachedTimestamp

// crutch
e.timeStamp <= 0

// crutch when event started from handler - binded element
e.target === e.currentTarget

// crutch when event started from child element
e.currentTarget.contains(e.target)

// crutch
e.target.ownerDocument !== document

[rx-837]

I created the pull request #11031

[ashuihui]

in oppon, e.timeStamp size is 6,attachedTimestamp size is 13 .Event is alway no work .