Карту иногда нельзя прокручивать в iOS-сафари - PullRequest
Новая
       10

Карту иногда нельзя прокручивать в iOS-сафари

0 голосов
/ 28 июня 2018

Пример здесь 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * { margin:0; padding:0; box-sizing: border-box; }

        #map {position:fixed; top: 0; left: 0; right: 50%; bottom: 0;}
        #content { margin: 0 0 0 50%; background: lightblue;}
        p {
            padding: 50px
        }
    </style>
</head>
<body>
    <div id="map"></div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
                officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
                obcaecati quae quibusdam quis sunt ut, vel?</p> 
        </div> 


    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoicGF2ZWxzIiwiYSI6ImNpdGN4Zm56MDAwNWEyeW8zcWFoaGNkbHgifQ.o_5rdc4PS-yJV8tkh8cyEA';

        var mapEl = document.getElementById('map')

        var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
            center: [-74.50, 40], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });

         map.on('load', () => {
          map.on('touchstart', e => console.log('touchstart', e))
          map.on('touchmove', e => console.log('touchmove', e))
          map.on('touchcancel', e => console.log('touchcancel', e))
          map.on('touchend', e => console.log('touchend', e))

          map.on('movestart', e => console.log('movestart', e))
          map.on('move', e => console.log('move', e))
          map.on('moveend', e => console.log('moveend', e))

          map.on('dragstart', e => console.log('dragstart', e))
          map.on('drag', e => console.log('drag', e))
          map.on('dragend', e => console.log('dragend', e))

          map.on('error', e => console.log('error', e))
        }) 

        var mapTouchFix, tmt;

        if (window['Event']) {
          mapTouchFix = new Event('touchstart') 
        }

        window.addEventListener('scroll', () => {
          console.log('add scroll tmt')
          if (tmt) clearTimeout(tmt)
          tmt = setTimeout(() => {            
            console.log('scroll tmt')
            fixmap()
          }, 1000)
        })

        document.querySelector('#map').addEventListener('touchstart', () => {
          console.log('Ha touch start processed ON MAP')
        })

        function fixmap () {

          console.log('isDragPanEnabled' + map.dragPan.isEnabled())
          console.log('isDragPanActive' + map.dragPan.isActive())

           var p = map.getPitch()

          map.easeTo({
            pitch: p + 1
          })         

          map.dragPan.disable()
          console.log('dragpan disabled')

          setTimeout(() => {
            map.dragPan.enable() 
          map.easeTo({
            pitch: p
          }) 
            console.log('dragpan enabled back')
          }, 1000)

          mapEl.dispatchEvent(mapTouchFix)
          document.documentElement.dispatchEvent(mapTouchFix)
          console.log('fixed', mapTouchFix)
        }
    </script>
</body>
</html>

Несколько раз после прокрутки страницы пользователь не может прокрутить карту, прокрутить карту можно только после нажатия любой кнопки или на самой карте.

Если вы не можете воспроизвести ее, попробуйте прокрутить карту во время прокрутки страницы и переместить карту после завершения прокрутки.

Воспроизводится в iPad mini, iPad pro, iPhone с v11.x iOS

Я пытался изменить CSS, чтобы удалить все, что может вызвать такое поведение, вызвать методы карты и вызвать события touchstart, ничего не помогает.

Также я реализовал прокрутку двумя пальцами для карты в другом примере, но иногда это также имеет место.

Несколько раз после прокрутки страницы пользователь не может прокрутить карту, прокрутить карту можно только после нажатия любой кнопки или на самой карте.

Если вы не можете воспроизвести ее, попробуйте прокрутить карту во время прокрутки страницы и переместить карту после завершения прокрутки.

Воспроизводится в iPad mini, iPad pro, iPhone с v11.x iOS

Я пытался изменить CSS, чтобы удалить все, что может вызвать такое поведение, вызвать методы карты и вызвать touchstart события, ничего не помогает.

Также я реализовал прокрутку двумя пальцами для карты в другом примере, но иногда возникает проблема.

...