Missing cover (and backwards About page showing) on Android and Opera Mobile

Posted in : BookCard
3babyducks
Participant
16 September 2014 at 04:10
#16079

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
Keymaster
21 September 2014 at 15:45
#16150

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
Participant
21 September 2014 at 22:56
#16166

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
Keymaster
21 September 2014 at 23:07
#16167
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
Participant
22 September 2014 at 00:00
#16168

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
Participant
23 September 2014 at 01:21
#16194

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
Keymaster
23 September 2014 at 22:15
#16209
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
Participant
24 September 2014 at 00:55
#16213

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
Participant
24 September 2014 at 00:58
#16214

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
Keymaster
29 September 2014 at 13:02
#16272
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
Participant
3 October 2014 at 00:39
#16322

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
Participant
3 October 2014 at 00:43
#16323

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
Keymaster
7 October 2014 at 22:23
#16360

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