[3babyducks]

Hello.

Great theme.

I found some bugs though on the Android OS and Opera Mobile OS. Since the Samsung tablet is widely used, I thought this bug to be important.

http://harkeystudio.com/downloads/android-tablet-bug.png

These devices are landscape (horizontal) mode by default (where Apple iPad is portrait). The issue is on Android and Opera Mobile devices, most likely with the os. (Turning an iPad iOS horizontal – landscape – works fine).

Devices tested (through http://browserstack.com) with this bug are:

Samsung Galaxy Note 10.1 (Android 4.0)
Samsung Galaxy Tab (Opera Mobile)
Samsung Galaxy Tab 10.1 (Opera Mobile)
Samsung Galaxy Tab 2 10.1 (Android 4.0)
Google Nexus 7 (Android 4.1)

I did notice that also on an Android phone, before the template is thrown into .safe-mod, the issue occurs here also. Therefore, it seems to be an Android issue, and loading a 1280px phone on its side (horizontal) may trigger the same bug.

All versions of desktop work fine (Chrome and Opera desktop). It’s the mobile version of these browsers.

Since I’m using this theme for a site that is live right now, I was wondering if you might have a fix for this.

Thanks,
Andrew

[ahmetsali]

Hi, i see the issue. It looks like android mobile browser can’t handle the 3d book layout. I fixed it by forcing the layout into safe-mod on android tablets. It will be available in the next update. Thanks for the feedback.

[3babyducks]

Thanks for the reply.

Since I have a website that is already live with this bug, would it be possible to get the updated javascript snippet to paste into my files, now?

I presume that this is around line 42 of the main.js file?

Thanks,
Andrew

[ahmetsali]

sure you can, this is the updated code block that starts at line:42 ends in about line: 57

                // ------------------------------
		// LAYOUT FALLBACK : SAFE MOD
		safeMod = $('html').attr('data-safeMod') === 'true';
		var isIE11 = !!navigator.userAgent.match(/Trident\/7\./); 
		var ua = navigator.userAgent.toLowerCase();
		var isAndroid = ua.indexOf("android") > -1;
		safeMod = safeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || $(window).width() < 960 || $.browser.msie || isIE11 || isAndroid;
		if(safeMod) {
			
			$('html').addClass('safe-mod');	
			
			setActivePage();
			$.address.change(function() {
				setActivePage();
				});
		}
		// ------------------------------

[3babyducks]

That’s great! Thanks.

Works great in Android.

How would I add Opera Mobile to that script? (It’s still broken on Opera Mobile).

And, if in the future I wanted to throw the whole website into .safe-mod (for all browsers), how would I do that?

Thanks,
Andrew

[3babyducks]

OK. Regarding the second question, I found the answer, and then I saw that you had covered the topic in the documentation. It would be:

data-safeMod=”false” to data-safeMod=”true”

I apologize for not seeing that earlier.

Thanks for fixing the android bug, and let me know if you are also able to resolve the Opera Mobile bug.

Thanks again,
Andrew

[ahmetsali]

can you try this updated code and see if it works for opera mobile;

// ------------------------------
// LAYOUT FALLBACK : SAFE MOD
safeMod = $('html').attr('data-safeMod') === 'true';
var isIE11 = !!navigator.userAgent.match(/Trident\/7\./); 
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isOperaMobile = navigator.userAgent.match(/Opera Mini/i);
safeMod = safeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || $(window).width() < 960 || $.browser.msie || isIE11 || isAndroid || isOperaMobile;
if(safeMod) {
	
	$('html').addClass('safe-mod');	
	
	setActivePage();
	$.address.change(function() {
		setActivePage();
		});
}
// ------------------------------

[3babyducks]

That code fixed the Opera Mobile on a Samsung Galaxy Tab (1024×600).

However, the Opera Mobile on a Samsung Galaxy Tab 10.1 (1280×800) is still broken.

Hope this helps.

[3babyducks]

Let me clarify.

the Opera Mobile on a Samsung Galaxy Tab (1024×600) *IS* in .safe-mod

the Opera Mobile on a Samsung Galaxy Tab 10.1 (1280×800) *IS NOT* in .safe-mod

Hope this helps.

[ahmetsali]

this is really weird, can you check with this one;

// ------------------------------
// LAYOUT FALLBACK : SAFE MOD
safeMod = $('html').attr('data-safeMod') === 'true';
var isIE11 = !!navigator.userAgent.match(/Trident\/7\./); 
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isOperaMobile = isAndroid && navigator.userAgent.indexOf("Opera")> -1;
safeMod = safeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || $(window).width() < 960 || $.browser.msie || isIE11 || isAndroid || isOperaMobile;
if(safeMod) {
	
	$('html').addClass('safe-mod');	
	
	setActivePage();
	$.address.change(function() {
		setActivePage();
		});
}
// ------------------------------

[3babyducks]

OK. I think it may be a problem with Browserstack’s emulators and how the user session for the account caches. Testing for Opera Mobile on Browserstack is difficult because it gets hung up a lot.

I tested again the first code you wrote, and it worked on Opera Mobile on a Samsung Galaxy Tab 10.1 (1280×800), which previously displayed as broken. So I’ve now had instances of both Samsung devices working with this code:


// ------------------------------
// LAYOUT FALLBACK : SAFE MOD
safeMod = $('html').attr('data-safeMod') === 'true';
var isIE11 = !!navigator.userAgent.match(/Trident\/7\./);
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isOperaMobile = navigator.userAgent.match(/Opera Mini/i);
safeMod = safeMod || !Modernizr.csstransforms || !Modernizr.csstransforms3d || $(window).width() < 960 || $.browser.msie || isIE11 || isAndroid || isOperaMobile;
if(safeMod) {

$('html').addClass('safe-mod');

setActivePage();
$.address.change(function() {
setActivePage();
});
}
// ------------------------------


The second code you wrote I have not been able to get to work, but I do not know if it is the code or Browserstack.

Therefore, I’m going with the first code (the one I re-pasted here), and hope it is the best.

If anybody else out there in this forum has a physical device to test on, that would be great. But I think you got it!

Thanks for the fix. Great support, and very creative theme.

[3babyducks]

Just to confirm. I was able to test both Samsung emulators, and both are working with the code I just posted, that you wrote.

Thanks again.

[ahmetsali]

ok then, i will include the first code in the next update. Thanks for the feedback.