Website repeatedly reloads, then crashes on iPhone 4: iOS 8.0.2 & iOS 8.1.2 -
an example of happens when loading website can seen here theverge.com. no such problems occur on latest browser , os versions for:
- windows 8.1 - chrome, firefox, opera, ie.
- osx yosemite - chrome, safari.
- android 4.4 - chrome, firefox, opera, safari.
- ios 7.1.2(ipad) - safari.
- ios 8.3 (iphone 5) - safari.
however, on 2 separate iphone 4s devices (ios 8.0.2 & ios 8.1.2), safari continue refresh page, each time reading "problem occurred webpage reloaded" until crashing , reading "a problem repeatedly occurred on [website url]". have made sure javascript/jquery syntactically correct (as loading webpage javascript turned off in safari settings - same problem), cleared cache, restarted iphones , can not imagine else causing problem. web page small total file size of around 300kb , simple dom manipulation.
from can tell of own testing , have read, problem isolated ios 8.0.2 , 8.1.2 obviously, website in minority of sites crash on os , know causes problem.
thank you.
edit: updated 1 of iphones ios 8.3 - problem still persists. absolutely stumped @ point , suggestions appreciated.
short answer:
check of css animation keyframes , remove font-size
animations within blocks.
long answer
the lack of developer-centric conversations regarding "a problem repeatedly occurred on..." issues disappointing. after hour of googling tonight stumbled on post here , had double-take when saw timestamp. // high 5 fellow trouble-shooter.
as luck have it, able track down potential source ios/webkit bug within css. seems related how safari deals font-size
animations inside of css keyframes
. had in sass:
@-webkit-keyframes labels-bottom { 0% { opacity: 1; color:#888888; top: 0.1em; font-size: 1.5em; } 20% { font-size: 1.5em; opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; font-size: 0.85em; } 100% { top: 4em; opacity: 1; } }
when removed whole block, began working.
when went further , removed css properties one-by-one, crash seemed isolated font-size
animation. it, however, does not appear associated @font-face
web fonts or if specify size using different units (em/px/pt). conditions tested caused same crash. thing fixed removing font-size changes within keyframe blocks, la:
@-webkit-keyframes labels-bottom { 0% { opacity: 1; color:#888888; top: 0.1em; } 20% { opacity: 0; } 30% { top: 0.1em; } 50% { opacity: 0; } 100% { top: 4em; opacity: 1; } }
it's possible (and perhaps likely) other animated properties can trigger crash, fix worked me , hope well.
ps: tested on both ios 8.1.2 , 8.3 (ipads).