ARTICLE AD BOX
I have been facing a very wired issue with my customer who uses safari in their phones :
drive.google.com/file/d/1x9IvLvuyIAycaIW5JQEdZEc8Y9EFlQFp/view?usp=sharing
screen keep flashing/flickering for ever in every page under main layout .
i tried access same harmed account from my iphone at same time he was facing it , did not happen to me
i tried every step to reproduce the issue but i couldn't .
this is the third customer reporting same issue in the past 2 weeks , with no clue how and what triggers it .
can you help me trace the issue and debug it better ?
note :
i am using zoom in css for phone users if that helps
main layout : :
{function="load_lang('ui/game')"} <!DOCTYPE html> <html lang="ar"> <head> <title>{$game_title}</title> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta content="{$metatag}" name="keywords"> <meta name="viewport" content="width=device-width"> <meta name="format-detection" content="telephone=no" /> <link href="{function="add_style('lang.css', ASSETS_DIR.'default/lang/'.$lang.'/')"}" rel="stylesheet" type="text/css" /> <link href="{function="add_style('compact.css?3.6', ASSETS_DIR.'default/lang/'.$lang.'/')"}" rel="stylesheet" type="text/css"> {if="$data['dark_mode']"} <link href="{function="add_style('darkMode.css?v=6.1', ASSETS_DIR.'default/new/')"}" rel="stylesheet" type="text/css" /> {else} <link href="{function="add_style('style.css?12.2', ASSETS_DIR.'default/new/')"}" rel="stylesheet" type="text/css" /> {/if} <link rel="shortcut icon" href="{function="add_style('fic.gif', ASSETS_DIR)"}" type="image/x-icon" /> <link href="{function="add_style('chat-widget.min.css?v=6.2', ASSETS_DIR)"}" rel="stylesheet" type="text/css" /> {if="$player != NULL && $canUseFarmQueueGlobally"} <!-- Farm Queue v6.0 --> <style> #fqb{position:fixed;bottom:20px;right:20px;z-index:9998;direction:rtl;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .2s} #fqb.fqb-v{opacity:1;transform:translateY(0);pointer-events:auto} .fqb-in{background:#fff;border-radius:10px;box-shadow:0 3px 15px rgba(0,0,0,.12);padding:12px 16px;min-width:180px;border:1px solid #e0e0e0} .fqb-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .fqb-h span{font-size:13px;color:#555} .fqb-h b{font-size:16px;color:#333} .fqb-br{height:6px;background:#eee;border-radius:3px;overflow:hidden;margin-bottom:8px} #fqb-f{height:100%;background:#4CAF50;border-radius:3px;transition:width .2s;width:0} #fqb-w{display:none;color:#d32f2f;font-size:11px;text-align:center;margin-bottom:6px;padding:5px;background:#ffebee;border-radius:4px} .fqb-a{display:flex;gap:6px;justify-content:center} .fqb-b{padding:5px 12px;font-size:11px;border:1px solid #ddd;background:#f5f5f5;border-radius:4px;cursor:pointer} .fqb-c{color:#c62828;border-color:#ef9a9a} .fqb-r{background:#e8f5e9;border-color:#a5d6a7;color:#2e7d32} .fqb-eta{font-size:11px;color:#666;text-align:center;margin-bottom:6px} .fqb-t{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(50px);padding:10px 20px;border-radius:6px;color:#fff;font-size:13px;z-index:10001;opacity:0;transition:all .2s} .fqb-ts{opacity:1;transform:translateX(-50%) translateY(0)} #fqb-m{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s} #fqb-m.fqb-mv{opacity:1} .fqb-mo{background:#fff;border-radius:12px;max-width:320px;width:90%;box-shadow:0 10px 40px rgba(0,0,0,.2);transform:scale(.9);transition:transform .2s} #fqb-m.fqb-mv .fqb-mo{transform:scale(1)} .fqb-mc{padding:24px 20px;text-align:center} .fqb-mt{font-size:15px;color:#333;line-height:1.6;margin-bottom:20px;direction:rtl} .fqb-mb{display:flex;justify-content:center;gap:10px} .fqb-mk{background:#4CAF50;color:#fff;border:none;padding:10px 32px;border-radius:6px;font-size:14px;cursor:pointer;transition:background .2s} .fqb-mk:hover{background:#43a047} .fqb-mn{background:#f5f5f5;color:#666;border:1px solid #ddd;padding:10px 24px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s} .fqb-mn:hover{background:#eee;border-color:#ccc} @media(max-width:600px){#fqb{right:10px;left:10px;bottom:70px}.fqb-in{min-width:auto}} </style> {if="$data['dark_mode']"} <style> .fqb-in{background:#2d2d2d;border-color:#444;box-shadow:0 3px 15px rgba(0,0,0,.3)} .fqb-h span{color:#aaa} .fqb-h b{color:#eee} .fqb-br{background:#444} #fqb-w{background:#4a1c1c;color:#ff8a8a} .fqb-b{background:#3d3d3d;border-color:#555;color:#ddd} .fqb-c{color:#ff6b6b;border-color:#6b3030} .fqb-r{background:#1e3a1e;border-color:#2e5a2e;color:#7dcf7d} .fqb-eta{color:#999} .fqb-mo{background:#2d2d2d;box-shadow:0 10px 40px rgba(0,0,0,.4)} .fqb-mt{color:#eee} .fqb-mn{background:#3d3d3d;border-color:#555;color:#ccc} .fqb-mn:hover{background:#4d4d4d;border-color:#666} </style> {/if} {/if} <script type="text/javascript"> var d3l= {if="$lang == 'ar' "}180{else}-600{/if}; var stopReload = {$data['stop_reload']} ; {if="($player != NULL)"} window.pid = '{$player->playerId}'; window.currentVillageId = {$data['selected_village_id']}; window.currentVillageName = {function="json_encode($data['village_name'])"}; window.canUseFarmQueue = {if="$canUseFarmQueueGlobally"}true{else}false{/if}; window.useFarmQueue = window.canUseFarmQueue; // Default to queue if available setTimeout(function() { if (typeof Toaster !== 'undefined') { Toaster.postMessage('{$player->playerId}'); } }, 1000); // 100ms delay to wait for the channel setup {/if} </script> <script src="{function="add_style('jq3.js?4.2', ASSETS_DIR)"}" type="text/javascript"></script> <script src="{function="add_style('core.js?4.2', ASSETS_DIR)"}" type="text/javascript"></script> <script src="{function="add_style('maxA.js?v=6.1', ASSETS_DIR)"}" type="text/javascript"></script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MFKMCMZ');</script> <!-- End Google Tag Manager --> <noscript><h3> الجافا سكربت لديك معطل، هذا سيعطل الكثير من مميزات اللعبة .فضلاً قم بشتغيله </h3></noscript> <style> .plus22{ overflow: visible; display: flex; flex-direction: column; justify-content: space-between; align-items: self-start; } .temp-gold{ font-size: 10px; background: #fff; min-width: 40px; padding: 2px 4px; right: 0; width:100%; height:100%; } .reward-link{color:#e53935!important;font-weight:700} .mobile-dropdown{display:inline-block;position:relative} .mobile-dropdown .dropdown-menu{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.15);min-width:120px;z-index:1000} .mobile-dropdown.open .dropdown-menu{display:block} .mobile-dropdown .dropdown-menu a{display:block;padding:8px 12px;color:#333;font-size:13px;border-bottom:1px solid #eee} .mobile-dropdown .dropdown-menu a:last-child{border-bottom:none} .mobile-dropdown .dropdown-menu a:hover{background:#f5f5f5} .clock-content { display: grid; gap: 4px; align-items: center; grid-template-columns: 1fr; /* Single column layout */ } /* Phone styles only */ @media screen and (max-width: 674px) { .game-links{ margin-right:15px; } .clock2 { gap: 0; right:unset; left:2%; } .clock-details { background-color: rgba(255, 255, 255, 0.68); padding: 5px 4px; border-radius: 10px; } .clock-content { grid-template-columns: 1fr; /* Single column layout */ grid-auto-rows: auto; /* Automatically size rows */ } } /* Tablet and Desktop shared styles */ @media screen and (min-width: 675px) { .ip-info{ position: absolute; bottom: 0; left: -100%; } .changeWorld { grid-column: 1 / -1; /* Spans across the entire row */ /* Add spacing below */ } } /* Desktop specific font size */ @media screen and (min-width: 1024px) { .clock-details { font-size: 10px; } } </style> {if="($recordPlayer)"} <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "tnd4juygc7"); clarity("identify", "{$player->playerId}"); clarity("set", "player_name", "{$data['name']}"); clarity("set", "server", "{#used_server}"); </script> {/if} <link rel="preload" href="/assets/default/img/vip/mainHeader.png" as="image"> </head> <body class=""> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MFKMCMZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <header> <div class="header-container"> <div id="top-links"> <a href="https://t.me/tatarzone_ar" target="_blank"><img src="/assets/images/mobile/tele.png" alt="هدية"> </a> <a href="info"><img src="https:///assets/icons/info.png" alt="off"> </a> <a href="village1"><img src="https:///assets/icons/home.png" alt="off"> </a> <a href="profile"><img src="https://s{#used_server}.site.com/assets/icons/user.png" alt="profile"> </a> <a href="support"><img src="https://s{#used_server}.site.com/assets/icons/help.png" alt="MsgAdmin"> </a> <a href="logout" title="خروج"><img src="https://s{#used_server}.site.com/assets/icons/off.png" alt="off" ></a> <a onclick="return showManual(0,0);" title="الدليل"><img src="https://s{#used_server}.site.com/assets/icons/explain.png" alt="off"></a> </div> <div id="UBar"> <button class="Main" style="border: 0;" onclick="toggleMobileMenu()"><svg style="width:20px;color:black;background: transparent;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-6 w-6"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button> <a href="profile" style="color:black;">العضوية</a> <div class="mobile-dropdown"> <a href="#" class="dropdown-toggle" onclick="event.preventDefault();this.parentElement.classList.toggle('open');" style="padding-right:15px;color:black;">المساعدة ▾</a> <div class="dropdown-menu"> <a href="info">شرح اللعب</a> <a href="support">التواصل مع الدعم</a> <a href="#" onclick="return showManual(0,0);">دليل اللعبة</a> </div> </div> <a class="leftham " href="#" id="villages-area" off="{function="sizeof($playerVillages)"}" style="padding-right:15px;color:black;">قرى</a> <a href="specials" style="color:red;">عروض الذهب</a> <a href="activityreward" style="padding-right:15px;color:#e53935;font-weight:700;">المكافأة</a> <a href="logout"><img src="https://s{#used_server}.site.com/assets/icons/off.png" alt="off" style="width:25px;" class="NI"></a> </div> <nav> <div class='clock2'> <div class='icon'> {if="($player != NULL)"} {$_d = intval(date('G'))} {if="(6 <= $_d && $_d <= 19)"} <img src='https://s{#used_server}.site.com/assets/default/img/l/day.gif' title='{#LANGUI_GAME_MORNING}' alt='{#LANGUI_GAME_MORNING}'> {else} <img src='https://s{#used_server}.site.com/assets/default/img/l/night.gif' title='{#LANGUI_GAME_AFTERNOON}' alt='{#LANGUI_GAME_AFTERNOON}'> {/if} </div> <div class='clock-details'> <fx></fx> <div class='clock-content'> <span class='block changeWorld' onclick="toggleModal()"> العالم {#used_server} <span>(تغيير العالم)</span> </span> <span class='time-info'> ({$scriptstarttime} م.ث) - <span id='timer2'>{'G:i:s'|date}</span> </span> <span class='ip-info'> | ip:{$playerIp} </span> </div> </div> </div> <div class='game-links'> {if="($player != NULL)"} <a href='village1' id='village11'> <div class='village11 game-link'> </div> </a> <a href='village2' id='village21'> <div class='village21 game-link'> </div> </a> <a href='map' id='map11'> <div class='map11 game-link'> </div> </a> <a href='analytics' id='statics1'> <div class='statics1 game-link'> </div> </a> <div class="messages1 game-link msg-{$reportMessageStatus}"> <a href='message' id='to-msg'></a> <a href='report' id='to-rep'></a> </div> {/if} </div> <div class='plus22' style="overflow:visible"> <a href='plus?t=2' class='gold-plus'> <div class='right'> <div class='gold-icon'> <img src="{function="add_style('x.gif', ASSETS_DIR)"}" border="1" class="gold" alt="عدد الذهب"></div> <div class='gold-num'>{function="toNum($data.gold_num)"}</div> </div> <div class='left'> {if="($data['active_plus_account'])"} <img src='/assets/default/img/vip/plus-active.png' alt='البلس مفعل'> {else} <img src='/assets/default/img/vip/plus-inactive.png' alt='البلس غير مفعل'> {/if} </div> </a> {if="($data['temp_gold_num'] > 0)"} <span class="temp-gold" > الذهب المؤقت:<img src="{function="add_style('x.gif', ASSETS_DIR)"}" border="1" class="gold" alt="عدد الذهب">{function="toNum($data.temp_gold_num)"} </span> {/if} </div> </nav> </div> </header> <div class='container'> <aside> {if="($player != NULL)"} <ul> <li><a href='/'>الصفحة الرئيسية</a></li> <li><a href='#' onclick='return showManual(0,0);'>الدليل السريع</a></li> <li><a href='profile'>بطاقة العضوية</a></li> <li><a href='friends?t=1'> الأصدقاء <span class='frinds'>{$FriendR}</span> </a></li> <li><a href='info'>شروحات اللعبة</a></li> <li><a href='message?t=4'>الشات</a> {if="($data['chats_count'] > 0)"} <span class='chatsCounter'>+{$data['chats_count']}</span> {/if} </li> <li><a href='specials'>عروض الذهب</a></li> <li><a href='support'>مراسلة الدعم</a></li> <li><a href='activityreward' class='reward-link'>استلام المكافأة</a></li> <li><a href='logout'>تسجيل الخروج</a></li> <li class="plus-li"><a href='plus?t=2' class='to-plus'>حساب <span class='green'>بلاس</span></a></li> {if="($player != NULL && $isPlayerInDeletionProgress)"} <li> <a href='profile?t=6' class="deltimer"> {#LANGUI_GAME_PLAYERDEL} <span id='timer1'>{$getPlayerDeletionTime}</span> {#time_hour_lang} </a> </li> {/if} {if="($player != NULL && $inProtection)"} <li> <a href='unprotect'class="protect"> تنتهي الحماية بعد : <span id='Tiker_20000'>{$protectionString}</span> {#time_hour_lang} <script> $((i) => { xTimer("#Tiker_20000", {$protectionTime}); }); </script> </a> </li> {/if} </ul> {/if} </aside> <main> {if="( $player != NULL )"} <div id='res1'> <div class='res warehouse'> <div class='icon' role='img' alt='{#item_10}' title='{#item_10}'></div> <div id="wa" class='counter-storage' title='{#item_curprod_10}'>{function="toNum($resources.1.store_max_limit)"}</div> </div> <div class='res wood'> <div class='icon' role='img' alt='{#item_title_1}' title='{#item_title_1}'></div> <div id="_JS_1" class='counter-storage' alt="{$resources.1.store_max_limit}" title="{$resources.1.calc_prod_rate}"> {$resources.1.current_value} </div> </div> <div class='res mug'> <div class='icon' role='img' alt='{#item_title_2}' title='{#item_title_2}'></div> <div id="_JS_2" class='counter-storage' alt="{$resources.2.store_max_limit}" title="{$resources.2.calc_prod_rate}"> {$resources.2.current_value} </div> </div> <div class='res iron'> <div class='icon' role='img' alt='{#item_title_3}' title='{#item_title_3}'></div> <div id="_JS_3" class='counter-storage' alt="{$resources.3.store_max_limit}" title="{$resources.3.calc_prod_rate}"> {$resources.3.current_value} </div> </div> <div class='res granary'> <div class='icon' role='img' alt='{#item_11}' title='{#item_11}'></div> <div id="wa2" class='counter-storage' title='{#item_curprod_10}'>{$resources.4.store_max_limit}</div> </div> <div class='res crop'> <div class='icon' role='img' alt='{#item_title_4}' title='{#item_title_4}'></div> <div id="_JS_4" class='counter-storage' alt="{$resources.4.store_max_limit}" title="{$resources.4.calc_prod_rate}"> {$resources.4.current_value} </div> </div> </div> {/if} <div class="wrap {$contentCssClass}"> {$content} </div> <div id="ce"></div> </main> <div id='left'> <div> {if="( $player != NULL )"} {if="$miricalLvl && $miricalLvl.lvl > 0"} أكبر معجزة: <a href="village3?id={$miricalLvl.village_id}"> {$miricalLvl.village_name} ({$miricalLvl.lvl}) </a> {/if} {if="( $data['guide_quiz'] != GUIDE_QUIZ_COMPLETED && $player != NULL )"} <div id="anm" style="width:118px; height:142px; visibility: hidden;"></div> <div class="hero-guide {$getGuideQuizClassName}" title='{#LANGUI_GAME_LMENU1}' alt='{#LANGUI_GAME_LMENU1}' onclick='showTask();' id="qgei"> </div> {/if} </div> <div class="links-wraper"> <div class="only-on-phone"> {if="($player != NULL && $isPlayerInDeletionProgress)"} <div> <a href='profile?t=6' class="deltimer"> {#LANGUI_GAME_PLAYERDEL} <span id='timer1'>{$getPlayerDeletionTime}</span> {#time_hour_lang} </a> </div> {/if} {if="($player != NULL && $inProtection)"} <div> <a href='unprotect'class="protect"> تنتهي الحماية بعد : <span id='Tiker_200000'>{$protectionString}</span> {#time_hour_lang} <script> $((i) => { xTimer("#Tiker_200000", {$protectionTime}); }); </script> </a> </div> {/if} </div> <div class='villages-list'> <a href='villages' class='villages-go' {if="!$data.active_plus_account"} onclick='return showManual(5,0);' {/if}>قائمة القرى :</a> <ul> {$m = new Global_Model();} {$attackCounts = $m->GetVillagesAttackCounts(array_keys($playerVillages))} {$capIdInt = intval($capitalId)} {$war9 = isset($attackCounts[$capIdInt]) ? $attackCounts[$capIdInt] : 0} <li {if="( $war9 > 0 )"} class="under_attack_li" {/if}> <a href="?vid={$capitalId}{$villagesLinkPostfix}" class="village-name {if="( $capitalId == $data['selected_village_id'] )"}hl{/if}" > {$playerVillages[$capitalId][2]} <span class="none" style="font-size:12px">(عاصمة)</span> </a> <div class='flex-icons'> <a href="build?bid=17&vid2={$capitalId}" class='give-res'> <img src='https://s{#used_server}.site.com/assets/default/img/r/6.gif' alt=''> </a> <a href="bulid?id={$capitalId}" class='attack'> <img src='{function="add_style('/default/img/a/def1.gif', ASSETS_DIR)"}' alt=''> </a> <div class='x-y'>({$playerVillages[$capitalId][0]}|{$playerVillages[$capitalId][1]})</div> </div> {if="( $war9 > 0 )"} <span class="attack-alert"> <img src='https://s{#used_server}.site.com/assets/default/img/a/att1.gif' alt='قريتك تحت الهجوم!'> <span class="alert-text">{$war9} هجوم</span> </span> {/if} </li> {if="( 1 < sizeof( $playerVillages ) )"} {loop="$playerVillages"} {if="($key != $capitalId)"} {$keyInt = intval($key)} {$war9 = isset($attackCounts[$keyInt]) ? $attackCounts[$keyInt] : 0} <li {if="( $war9 > 0 )"} class="under_attack_li" {/if}> <a href="?vid={$key}{$villagesLinkPostfix}" class="village-name {if="( $key == $data['selected_village_id'] )"}hl{/if}" > {$value.2} </a> <div class='flex-icons'> <a href="build?bid=17&vid2={$key}" class='give-res'> <img src='https://s{#used_server}.site.com/assets/default/img/r/6.gif' alt=''> </a> <a href="bulid?id={$key}" class='attack'> <img src='{function="add_style('/default/img/a/def1.gif', ASSETS_DIR)"}' alt=''> </a> <div class='x-y'>({$value.0}|{$value.1})</div> </div> {if="( $war9 > 0 )"} <span class="attack-alert"> <img src='https://s{#used_server}.site.com/assets/default/img/a/att1.gif' alt='قريتك تحت الهجوم!'> <span class="alert-text">{$war9} هجوم</span> </span> {/if} </li> {/if} {/loop} {/if} </ul> </div> {if="( sizeof( $playerLinks ) && $data['active_plus_account'] )"} <div class='player-links'> <a href='villages' class='villages-go'>الروابط الخاصة :</a> <ul> {loop="$playerLinks"} <li> <a href="{$value.linkHref|htmlspecialchars}" {if="(!$value.linkSelfTarget )"}target='_blank' {/if} class='village-name'>{$value.linkName}</a> </li> {/loop} </ul> </div> {/if} </div> {/if} {/if} </div> #cut due limits </body> </html>