history.pushState funktioniert nicht in Chrome unter iOS bei Ausführung ohne Interaktion

Question

Es scheint, als ob history.pushState in Chrome unter iOS nicht funktioniert, wenn es manuell ohne Touch/Klick-Interaktion ausgeführt wird.

Ich brauche Hilfe mit dem Verständnis, warum iOS Chrome dies tut, und wenn möglich, wie es zu beheben ist.

https://codepen.io/grymer/pen/OOmebv

hier ein mit einem minimalen Arbeitsbeispiel codepen. Um dies zu testen, müssen Sie den Stift ausgabeln und in Chrome auf einem iOS-Gerät in die Debug-Ansicht wechseln.

Dann werden Sie „eine Schaltfläche mit der Aufschrift‚Um zu sehen, B‘. Es drücken und dann Browser zurück. Sie werden sehen, dass dieses Verhalten von einem beliebigen anderen Browser unterscheidet.

var React, { Component } = React; 
var { BrowserRouter, Redirect, Route, Switch } = ReactRouterDOM; 

class App extends Component { 
    render() { 
    return (
     <BrowserRouter basename={location.href}> 
     <Switch> 
      <Route path="/b" component={B} /> 
      <Route component={A} /> 
     </Switch> 
     </BrowserRouter> 
    ); 
    } 
} 

class A extends Component { 
    constructor() { 
    super(); 

    this.state = {}; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    render() { 
    if(this.state.redirect) { 
     return <Redirect push to="/b" /> 
    } 

    return (
     <div> 
     On page A 
     <button onClick={this.handleClick}>To B</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ redirect: true }); 
    } 
} 

class B extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     showModal: false 
    }; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    componentDidMount() { 
    this.button.click(); // comment this line to manually open the modal by tapping the button 
    } 

    render() { 
    return (
     <div> 
     On page B 
     { this.state.showModal ? <Modal history={this.props.history} onClose={() => this.setState({ showModal: false }) } /> : null } 
     <button ref={(el) => this.button = el } onClick={this.handleClick}>Open modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ 
     showModal: true 
    }); 
    } 
} 

class Modal extends Component { 
    constructor() { 
    super(); 

    this.handleClick = this.handleClick.bind(this); 
    this.onPopState = this.onPopState.bind(this); 
    } 

    componentDidMount() { 
    this.props.history.push(this.props.history.location.pathname, { type: 'modal' }); 
    window.addEventListener('popstate', this.onPopState); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('popstate', this.onPopState); 
    } 

    render() { 
    return (
     <div> 
     Modal is opened 
     <button onClick={this.handleClick}>Close modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.props.onClose(); 
    this.props.history.goBack(); 
    } 

    onPopState() { 
    this.props.onClose(); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('react-container')); 

Answer 1

Chromium Team hat bestätigt, und sie arbeiten an einer Reparatur.

https://bugs.chromium.org/p/chromium/issues/detail?id=783382#c3