У меня проблема на одном сайте, который я разрабатываю. И это только на айфонах. Я тестирую на своем iPhone 11 (с iOS 13.1) - любой файл JS не работает. Неважно, есть ли в нем Vue или jQuery. На iPadOS - нет проблем, все работает просто отлично.
Я использовал удаленную отладку через Safari, но консоль понятна. Нет ошибок, предупреждений, ничего.
Я пытался использовать полифилы (все из ядра / js). Но даже простой jQuery код не работает - он не обновляет DOM. Если я использую console.log - он показывает модифицированный элемент, но при проверке DOM я все еще вижу оригинальный - ничего не изменилось.
Я перенес свой JS на Laravel Mix - и код работает как на Рабочий стол, Ма c, iPad. Не в iPhone.
Я оставил свою копию разработки с доступными для вас исходными картами: http://leba.dev.enet55.civ.pl Поэтому, пожалуйста, помогите разобраться - что с этим происходит.
webpack.mix. js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/home.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/custom.scss', 'public/css')
.js('resources/js/admin/gallery.js', 'public/js/admin')
.js('resources/js/list.js', 'public/js')
.js('resources/js/favorites.js', 'public/js')
.js('resources/js/facility.js', 'public/js')
.js('resources/js/super_adm_auction.js', 'public/js')
.js('resources/js/rooming.js', 'public/js')
.js('resources/js/adm_rooming.js', 'public/js')
.js('resources/js/adm_auction.js', 'public/js')
.js('resources/js/adm_edit.js', 'public/js')
.js('resources/js/adm_edit_descs.js', 'public/js')
.js('resources/js/adm_edit_descs_admin.js', 'public/js')
.js('resources/js/adm_gallery_old.js', 'public/js')
.js('resources/js/geosearch.js', 'public/js')
.js('resources/js/map.js', 'public/js')
.react('resources/js/new_facility.js', 'public/js')
.js('resources/js/facility_activation.js', 'public/js')
.js('resources/js/new_user_form.js', 'public/js')
.js('resources/js/search.js', 'public/js')
.sourceMaps();
list. js
require('./common/bootstrap');
require('leaflet/dist/leaflet-src');
require('./common/list_favorites');
require('./common/map');
require('./common/cssmap');
require('slick-carousel');
require('./common/ads.js');
common / map. js
jQuery(document).ready(function ($) {
$('.showMap').on('click', function (event) {
$('#mapaDiv').toggleClass('d-none');
var mapa = L.map('mapaDiv').setView([53.015331, 18.605700], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mapa);
var group = new L.featureGroup([]);
$('.wynik').each(function () {
marker = L.marker([parseFloat($(this).attr('data-lat').replace(",", ".")), parseFloat($(this).attr('data-long').replace(",", "."))]);
marker.addTo(mapa);
marker.bindPopup('<h4><a href="' + $(this).attr('data-url') + '">' + $(this).attr('data-nazwa') + '</a></h4><p>' + $(this).attr('data-adres') + '</p>');
group.addLayer(marker);
});
mapa.fitBounds(group.getBounds());
if (group.getLayers().length < 2) {
mapa.zoomOut();
}
event.preventDefault();
});
});
list.blade. php
@extends('base')
@section('title', ucfirst($seo['title']))
@section('meta_keywords', 'keywords,')
@section('meta_desc', ucfirst($seo['desc']))
@section('head_css')
@endsection
@section('js')
<script src="/js/list.js"></script>
@endsection
@section('content')
<div class="row">
<div class="col-12 mt-2">
<nav aria-label="breadcrumb" class="d-none d-md-block">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('home') }}">Strona główna</a></li>
@if ($category && $entry)
<li class="breadcrumb-item"><a
href="{{ route ('category_show', ['category' => $category->slug]) }}">{{ $category->name }}</a>
</li>
<li class="breadcrumb-item active" aria-current="page"><a
href="{{ route('listSingle', ['category' => $category->slug, 'entry' => $entry->slug]) }}">{{ $entry->name }}</a>
</li>
@endif
@if ($secondCategory && $secondEntry)
<li class="breadcrumb-item"><a
href="{{ route ('category_show', ['category' => $secondCategory->slug]) }}">{{ $secondCategory->name }}</a>
</li>
<li class="breadcrumb-item active" aria-current="page"><a
href="{{ route('listDouble', ['category' => $category->slug, 'entry' => $entry->slug, 'secondCategory' => $secondCategory->slug, 'secondEntry' => $secondEntry->slug]) }}">{{ $secondEntry->name }}</a>
</li>
@endif
</ol>
</nav>
<h1 class="lista_h1 mt-2 mb-0">{{ ucfirst($seo['h1']) }}</h1>
@if(!empty($entry))
@if(!empty($entry->info))
<div class="opis_podkat">{{ $entry->info }}</div>
@endif
@endif
<div class="sort">Uwaga: wyniki pokazują się w porządku alfabetycznym od losowo wybranej litery</div>
{{-- <!-- <div class="alert alert-primary" role="alert">
@if(!empty($entry))
{{ $entry->desc }}
@endif
</div> --> --}}
</div>
</div>
@if ($data->count() > 0)
<div class="row">
<div class="col-12 mt-2 mb-2">
<a href="#" class="showMap btn btn-info float-right text-md-right">Pokaż na mapie</a>
</div>
<div class="col-12 mt-2 mb-2 d-none" id="mapaDiv">
<div id="mapa"></div>
</div>
</div>