Martin
December 7, 2018, 12:18pm
1
I have very strange experience — please can anybody help me?
Pages not rendering correctly — but ONLY ON iPhone X with iOS12. STRANGEST THING is: iPad with iOS 12 works correctly…
I am writing complex app and see this rendering problem only with iPhone X. Here is the link, where I copied simplified skeleton of the app — I left here only smart select, where you can enter and demonstrate problem with page swipe back:
https://martin.byethost18.com/f7.html
What am I missing?
Pleeeeease help
Additional notes:
there’re inline DOM pages used: div class=“page stacked” data-name=“index-3”
pages are placed inside left panel
Martin
December 7, 2018, 12:29pm
2
code fragment (TRY page swipe back inside smart select):
<!-- Bottom Tabbar -->
<div class="toolbar tabbar tabbar-labels toolbar-bottom-md" id="tabbar">
<div class="toolbar-inner">
<a class="tab-link tab-link-active" href="#1" alt=".view-1" data-name=".index-1"><i class="icon f7-icons">social_instagram</i><span class="tabbar-label">Hledat KKS</span></a>
<a class="tab-link disabled" href="#2" alt=".view-1" data-name=".index-2"><i class="icon f7-icons">list<span class="badge color-red">4</span></i><span class="tabbar-label">Nalezené</span></a>
<a class="tab-link disabled" href="#3" alt=".view-1" data-name=".index-3"><i class="icon f7-icons">check_round</i><span class="tabbar-label">Vybrané</span></a>
<a class="tab-link" href="#4" alt=".view-2"><i class="icon f7-icons">document</i><span class="tabbar-label">Dokumentace</span></a>
<a class="tab-link" href="#5" alt=".view-3"><i class="icon f7-icons">help</i><span class="tabbar-label">Nápověda</span></a>
</div>
</div>
<div class="view view-main view-1">
<!-- class="page" data-name="index-1" -->
<div class="page" data-name="index-1">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Hledat KKS</div>
</div>
</div>
<div class="page-content">
<!-- Search form -->
<form>
<div class="list no-hairlines-md">
<ul>
<!-- Smart select item -->
<li>
<!-- Additional "smart-select" class -->
<a href="#" class="item-link smart-select smart-select-init" data-page-back-link-text=" " data-close-on-select="true" data-searchbar="true" data-searchbar-placeholder="Filtr">
<!-- select -->
<select name="pr1" id="pr1">
<option value="a" selected>A</option>
<option value="b">B</option>
</select>
<div class="item-content">
<div class="item-inner">
<!-- Select label -->
<div class="item-title">PR1</div>
<!-- Selected value, not required -->
<div class="item-after"></div>
</div>
</div>
</a>
</li>
<li class="item-content item-input">
<div class="item-media">
<i class="icon f7-icons">search</i>
</div>
<div class="item-inner">
<div class="item-input-wrap">
<input name="kks-input" id="kks-input" placeholder="Vepište KKS" type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<!-- Search Button -->
<div class="row">
<div class="col-25">
</div>
<div class="col-50">
<a class="button button-round button-big button-fill color-red" href="#search">Hledat KKS</a>
</div>
<div class="col-25">
</div>
</div>
</form>
</div>
</div>
And what is the issue? I am checking on iPhoneX iOS 12.1, everything works correct
Martin
December 7, 2018, 12:53pm
4
screen before I tap into PR1 smart select…
Martin
December 7, 2018, 12:56pm
5
then inside smart select I swipe back…
RESULT AFTER swipe back on attached photo: only top navbar was changed…
…BUT content remains?!
Martin
December 7, 2018, 1:19pm
7
sorry but video not playing for me…?
Copy/past this link:
https://drive.google.com/file/d/19UcMhtytioKnUb3kzaw0BrV2VZpSFFP6/view?usp=sharing
1 Like
Martin
December 7, 2018, 1:55pm
9
Also, here is another video from my test.
I do normal select and tap to B
and in 2nd step trying to swipeback from inside selector…
Martin
December 7, 2018, 10:27pm
10
After seeing your proof, I continued my research and finally found source of problems — it was EXPERIMENTAL SETTINGS of Safari in iOS12.1
Some time ago, I had some experimental settings activated — probably some of new CSS features was the problem… (Interesting is that only on iPhone.)
Thank you very much for help!
how do you solve this? can explain more?
Martin
May 24, 2020, 12:16pm
12
Go to iOS Settings / Safari / Advanced / Experimental
Try to switch (off) some option, which can collide with this feature…
