www.ozon.ru - site is not usable #9541
Comments
|
Confirmed, looks good in Chrome mobile but bad on Firefox mobile. Move to needsdiagnosis. |
|
I see mention of Mobify in their source, and it looks like simply spoofing the UA to Chrome isn't giving the same results that Chrome gets. Looks like this will be a lengthy diagnosis. |
|
This is the part using Mobify. ! function(e, i, t, o, n) {
function r(e, t, o, n) {
var r = i.getElementsByTagName("script")[0];
n.src ? e.src = n.src : n.innerHTML && (e.innerHTML = n.innerHTML), e.id = t, e.setAttribute("class", o), r.parentNode.insertBefore(e, r)
}
e.Mobify = {
points: [+new
Date
]
};
var s = /((; )|#|&|^)mobify=(\d)/.exec(location.hash + ";" + i.cookie);
if (s && s[3]) {
if (!+s[3]) return
} else
if (!t()) return;
i.write('<div id="eski-overlay" style="font-family:Helvetica-Light,Helvetica,Arial,sans-serif;font-weight:light;font-size:300%;line-height:100%;position:absolute;top:42%;left:0;right:0;text-align:center;color: #999;"><img src="https://ozon-st.cdn.ngenix.net/mobileapp/static/five-dots.svg"></div><plaintext style="display:none">'), setTimeout(function() {
var t = e.Mobify = e.Mobify || {};
t.capturing = !0;
var
s = i.createElement("script"),
a = function() {
var
t, o = new Date,
n = "eski-fail-req-coount",
r = 8,
s = sessionStorage.getItem(n) || 0;
r > s ? (s++, t = 100) : (s = 0, t = 18e5), sessionStorage.setItem(n, s), o.setTime(o.getTime() + t), i.cookie = "mobify=0;expires=" + o.toGMTString() + "; path=/", e.location = e.location.href
};
s.onload = function() {
if (n) {
var
e = i.createElement("script");
if (e.onerror = a, "string" == typeof n) r(e, "main-executable", "mobify", {
src: n
});
else {
var
t = "var main = " + n.toString() + "; main();";
r(e, "main-executable", "mobify", {
innerHTML: t
})
}
}
}, s.onerror = a, r(s, "mobify-js", "mobify", {
src: o
})
})
}(window, document, function() {
var
e = navigator.userAgent || navigator.vendor || window.opera,
i = !1;
return /mobi|phone|ipod|nokia/i.test(e) && (i = !0), (/msie|windows|media\scenter|opera\smini|ipad|android\s3|android\s2|iphone\sos\s(4|5|6)|ipad\sos\s(4|5|6)|fennec|android(.*)firefox/i.test(e) || Math.min(screen.width,
screen.height) > 767) && (i = !1), i
}, "/eskimobi/eski.mobi.min.js", "/eskimobi/mobi.js");the I wonder if it's a similar instance of https://miketaylr.com/posts/2014/08/document-writing-zeptos.html And Chromium project seems to want to keep their behavior. |
|
@miketaylr what do you think? |
@karlcow probably, at least to track See Also bugs. Perhaps with a title "Consider matching Blink/WebKit behavior for document.open and new window global" (or similar) |
|
ok thanks @miketaylr |
|
Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1456313 |
|
https://bugzilla.mozilla.org/show_bug.cgi?id=1456313 is fixed now. I'm not sure what this site looked like before, so it's hard to compare what might have changed. The mobile -optimized menu looks good, but the rest of the content overflows the viewport. @karlcow, can you take a look please? |
|
Taking screenshots so we have a memory of the current state as of today. Firefox Chrome We can see the top menu is correct. things are going wild after the top menu. There's no error on the console log on Firefox, but a couple of warnings. |
|
The header is identified as <html xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#" class=" gecko touch" lang="ru">and <html class=" mobile android linux touch">If I set these class values on html, so the initial issue has been fixed, but the UA sniffing is still not solved. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
lang="ru"
xmlns="http://www.w3.org/1999/xhtml"
prefix="og: http://ogp.me/ns#"
>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--eski.mobi-->
<script class="eskimobi" data-type="mobile">
!(function(e, i, t, o, n) {
function r(e, t, o, n) {
var r = i.getElementsByTagName("script")[0];
n.src ? (e.src = n.src) : n.innerHTML && (e.innerHTML = n.innerHTML),
(e.id = t),
e.setAttribute("class", o),
r.parentNode.insertBefore(e, r);
}
e.Mobify = { points: [+new Date()] };
var s = /((; )|#|&|^)mobify=(\d)/.exec(location.hash + "; " + i.cookie);
if (s && s[3]) {
if (!+s[3]) return;
} else if (!t()) return;
i.write(
'<div id="eski-overlay" style="font-family:Helvetica-Light,Helvetica,Arial,sans-serif;font-weight:light;font-size:300%;line-height:100%;position:absolute;top:42%;left:0;right:0;text-align:center;color: #999;"><img src="https://ozon-st.cdn.ngenix.net/mobileapp/static/five-dots.svg"></div><plaintext style="display:none">'
),
setTimeout(function() {
var t = (e.Mobify = e.Mobify || {});
t.capturing = !0;
var s = i.createElement("script"),
a = function() {
var t,
o = new Date(),
n = "eski-fail-req-coount",
r = 8,
s = sessionStorage.getItem(n) || 0;
r > s ? (s++, (t = 100)) : ((s = 0), (t = 18e5)),
sessionStorage.setItem(n, s),
o.setTime(o.getTime() + t),
(i.cookie =
"mobify=0; expires=" + o.toGMTString() + "; path=/"),
(e.location = e.location.href);
};
(s.onload = function() {
if (n) {
var e = i.createElement("script");
if (((e.onerror = a), "string" == typeof n))
r(e, "main-executable", "mobify", { src: n });
else {
var t = "var main = " + n.toString() + "; main();";
r(e, "main-executable", "mobify", { innerHTML: t });
}
}
}),
(s.onerror = a),
r(s, "mobify-js", "mobify", { src: o });
});
})(
window,
document,
function() {
var e = navigator.userAgent || navigator.vendor || window.opera,
i = !1;
return (
/mobi|phone|ipod|nokia/i.test(e) && (i = !0),
(/msie|windows|media\scenter|opera\smini|ipad|android\s3|android\s2|iphone\sos\s(4|5|6)|ipad\sos\s(4|5|6)|fennec|android(.*)firefox/i.test(
e
) ||
Math.min(screen.width, screen.height) > 767) &&
(i = !1),
i
);
},
"https://www.ozon.ru/eskimobi/eski.mobi.min.js",
"https://www.ozon.ru/eskimobi/mobi.js"
);
</script>Then we get (function() {
var ua,
mobile = false,
hasEski = window.eskimobi || false,
MOBILE_MAX_SCREEN = 768;
if (document.cookie.indexOf("mobi-path") <= 0) {
try {
var isLittleScreen =
Math.min(screen.width, screen.height) < MOBILE_MAX_SCREEN;
ua = navigator.userAgent || navigator.vendor || window.opera;
if (/mobi|phone|ipod|nokia/i.test(ua)) {
mobile = true;
}
if (
/msie|windows|media\scenter|opera\smini|ipad|android\s3|android\s2|iphone\sos\s(4|5|6)|ipad\sos\s(4|5|6)/i.test(
ua
) ||
!isLittleScreen
) {
mobile = false;
}
document.cookie = "isLittleScreen=" + isLittleScreen;
window.weGoMobile = mobile;
mobile &&
document.write(
'<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />'
);
} catch (err) {}
} else {
document.querySelector("html").classList.add("forceDesktop");
}
// Load CSS Files
ozonCombinedStyles.forEach(function(info) {
var path = info.domain + "/res/" + (mobile ? "m/" : "") + info.path;
if (hasEski && mobile) {
info.position === "MobileReady" &&
document.write(
'<link rel="Stylesheet" type="text/css" href="' + path + '" \/>'
);
} else {
document.write(
'<link rel="Stylesheet" type="text/css" href="' + path + '" \/>'
);
}
});
ozonSiteStyles.forEach(function(path) {
path = mobile ? path.replace("/v_", "/m_") : path;
document.write(
'<link rel="Stylesheet" type="text/css" href="' + path + '" \/>'
);
});
// Safe legacy injections
window._legacyStart = [];
window.Core = {
Modules: {
start: function(moduleName) {
window._legacyStart.push(moduleName);
}
}
};
window._legacyAdvManager = {
add: [],
addScriptImmediately: []
};
AdvManager = {
add: function() {
window._legacyAdvManager.add.push(
Array.prototype.slice.call(arguments)
);
},
addScriptImmediately: function() {
window._legacyAdvManager.addScriptImmediately.push(
Array.prototype.slice.call(arguments)
);
}
};
jQuery = {};
})();in there if (hasEski && mobile) {
info.position === 'MobileReady' && document.write('<link rel="Stylesheet" type="text/css" href="' + path + '" \/>');
} else {
document.write('<link rel="Stylesheet" type="text/css" href="' + path + '" \/>');
}
hmmm… |
|
There's also #11410 which seems similar. |
|
This script is still not being written in the DOM. <script
src="https://www.ozon.ru/eskimobi/mobi.js"
id="main-executable"
class="mobify"
></script> |
|
And this one is not being written either. <script src="https://www.ozon.ru/eskimobi/eski.mobi.min.js" id="mobify-js" class="mobify"></script>ok I know where it fails but I don't know why, apart that the UA sniffing has an impact. when the UA is Firefox, it nevers gets into the setTimeout in if (s && s[3]) {
if (!+s[3]) return;
} else if (!t()) return;
i.write(
'<div id="eski-overlay" style="font-family:Helvetica-Light,Helvetica,Arial,sans-serif;font-weight:light;font-size:300%;line-height:100%;position:absolute;top:42%;left:0;right:0;text-align:center;color: #999;"><img src="https://ozon-st.cdn.ngenix.net/mobileapp/static/five-dots.svg"></div><plaintext style="display:none">'
),
setTimeout(function() {
and even simplifying it doesn't give me the right result. "(function() {
var e = navigator.userAgent || navigator.vendor || window.opera,
i = !1;
return (
/mobi/i.test(e) && (i = !0),
(/android(.*)firefox/i.test(
e
) ||
Math.min(screen.width, screen.height) > 767) &&
(i = !1),
i
);
})"The function returns ok this is it function() {
var e = navigator.userAgent || navigator.vendor || window.opera,
i = !1;
return (
/mobi|phone|ipod|nokia/i.test(e) && (i = !0),
(/msie|windows|media\scenter|opera\smini|ipad|android\s3|android\s2|iphone\sos\s(4|5|6)|ipad\sos\s(4|5|6)|fennec|android(.*)firefox/i.test(
e
) ||
Math.min(screen.width, screen.height) > 767) &&
(i = !1),
i
);
},This returns Ah! Gotcha! doh! so much time for something obvious… /mobi|phone|ipod|nokia/i.test(e) && (i = !0),this returns true. No issue there. but THIS returns (/msie|windows|media\scenter|opera\smini|ipad|android\s3|android\s2|iphone\sos\s(4|5|6)|ipad\sos\s(4|5|6)|fennec|android(.*)firefox/i.test(e)I was trying to guess the opposite, then I realized that by decomposing and removing what would match Chrome and what would match Firefox, it would return false. OK So we need to contact the site so they remove:
OR if we ask @denschub to add a site patching. |
karlcow
added
type-uaoverride
adamopenweb
added
the
severity-critical
|
This has been fixed now.
Tested with: |
URL: https://www.ozon.ru/context/detail/id/3115179/
Browser / Version: Firefox Mobile 57.0
Operating System: Android 7.0
Tested Another Browser: Unknown
Problem type: Site is not usable
Description: pages layout is completely broken
Steps to Reproduce:
From webcompat.com with ❤️
The text was updated successfully, but these errors were encountered: