Experience-Monks / Experience-Monks/react-background-video-player
The prop `onClick` cannot trigger on `mobile Safari`
- Dominant language
- JavaScript
- Stars
- 57
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
` Event Click` just cannot trigger on mobile safari , and it may be changed to `touch Event`
- [why-your-click-events-don-t-work-on-mobile-safari](http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari)
and i did some change.
```diff
const videoProps = {
ref: v => this.video = v,
src: typeof this.props.src === 'string' ? this.props.src : null,
preload: this.props.preload,
poster: this.props.poster,
muted: this.props.muted,
loop: this.props.loop,
+ onTouchStart:this.props.onClick,
onTimeUpdate: this._handleTimeUpdate,
onEnded: this._handleVideoEnd,
...Object.assign(this.props.extraVideoElementProps, { playsInline: this.props.playsInline })
};
return (
className={`BackgroundVideo ${this.props.className}`}
style={Object.assign({ ...absolute100, visibility }, this.props.style)}
- onClick={this.props.onClick}
+ // onClick={this.props.onClick}
onKeyPress={this.props.onKeyPress}
tabIndex={this.props.tabIndex}
>
```
Contributor guide
Research direction
The payload does not name a file; locate the component code that builds videoProps and renders the container with onClick. Reproduce the behavior on mobile Safari, then verify the chosen interaction works there while preserving desktop and keyboard behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100