weird JS error on mobile/tablet browsers in production - javascript

This project has a lot of junk JS that we've inherited from the previous devs.
We've recently had images stop appearing on http://www.thegospelcoalition.org on tablet and mobile.
As you can see, images are fine in desktop. Pull it up on a device or in Chrome dev tools emulator and you can see the issue.
We're working fine in development, images appear as expected.
We've cleared CloudFlare cache but still no joy.
It's problematic to troubleshoot because locally, the team is fine.
Any pointers?

In js/aggregate-ck.js, you have this function that gets the img src and sets it as a background-image:
_transferImages = function(selector){
var $selector=$(selector);
$selector=$selector.not($_transferredImages);
$selector.each(function(){
var $this=$(this),
$img=$this.children("img"),
$img1;
if($img.length){
$img1=$img.eq(0);
$this.css({"background-image":"url('"+ $img1.attr("src")+"')"});
$img1.remove();
}
});
$_transferredImages=$_transferredImages.add($selector);
return $selector;
};
When I use a desktop user agent, it works fine because the images have an src attribute. Unfortunately, with a mobile user agent, these images do not have an src, but a data-cfsrc attribute.
To correct this function, replace
$img1.attr("src")
with
($img1.attr("src") || $img1.attr("data-cfsrc"))
and you're good to go!

The only thing I can see that becomes problematic is there's a call to an image that should be loaded at a certain screen size. You can see that the value returned by whatever performs the comparison is obviously returning incorrectly:
background-image: url(http://www.thegospelcoalition.org/undefined);
Fix that and you should be good. (Not respecting other erroneous errors)

Related

Website changes font-size of div upon changing its display property (only on mobile)

I'm writing my own site as a hobby (any html/css/js I know is self taught), but I've run into a issue that I can't seem to really understand (and thus I don't know how to fix it). I can't handle/fix this by myself unfortunately.
I tried taking away as much unneeded code as I could, reducing the site to the bare minimum where it still exhibits the unwanted behavior. I'm sorry for amateurish/hacky code, I'm not doing this professionally after all.
Here is a jsfiddle showing the code. It exhibits my wanted behavior: Click on any of the "Folders" and it expands and shows the "content". So far, so good.
If I now load the exact same code onto a site (I'm using netlify here), it still behaves as I want it to: Netlify link
If however I access it on a mobile browser (for reference I tried it on Google Chrome, Firefox and Brave browsers, all on Android) I get some behavior that I don't want:
If I expand one Folder, it works as intended, but if I expand the second folder as well the Folder name and its contents seem to change font size (they get noticeably bigger). If I close the normal one and reopen it it also changes size. For reference,
this is what it looks like.
It almost seems like me switching the display property to block changes the font size to something else, but I only defined one font size in the whole css.
I really don't know why this happens and I'd appreciate any help that explains it or points me in the right direction.
Thanks.
Edit: I managed to contact a third party who tried the site on their phone (iOS) and there the site did not exhibit the same weird/unwanted behavior. I'm not sure what exactly to do with that information.
I might have finally found a working solution to this weird and unexpected behavior. In your CSS, in the body section, add the following rules:
font-size-adjust: none;
text-size-adjust: none;
-webkit-text-size-adjust: none;
Those rules do not really have wide-spread support, apparently, and might change or their support get dropped at some point. One works only for Firefox, the other only for Chromium-based browsers, and yet another seems necessary for legacy Chromium-based. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust
https://caniuse.com/?search=font-size-adjust
https://caniuse.com/?search=text-size-adjust
Only with all three of those rules did I successfully prevent this font scaling for mobile Chromium, mobile Firefox Quantum (the old Firefox <=68 was not affected), both on Android, and for Chromium mobile mode on a Linux desktop. At least as far as my tests indicate.
Although I still fail to understand how and why such a rule would even be necessary: There definitely is no other conflicting rule in your example to affect rendered font size. My very wild guess would be that, under certain circumstances, some mobile browsers do not apply font-size rules correctly to hidden elements, causing this obscure cascaded font scaling.
Not at all the answer, but the described behavior can be reproduced even on a computer (Ubuntu Linux in my case; non-android device) using the given netlify link in Chromium, when using the mobile mode in Chromium DevTools. Maybe by reproducing it this way, somebody gets behind the cause of this behavior.
Upon opening the second folder, the font-size is indeed set to something 42.073px or something similar, depending on the responsive mode selected in the mobile mode. This is only shown in the "Computed" tab of DevTools, but there is no rule for this size in the "Styles" tab. I don't see any apparent cause for this text size change, sorry.
A few notes, however, on your HTML code (though none of the below seems to solve your problem):
Better put the <script> tag inside the <body> tag, right before the closing </body>. Or put it inside the <head>, but then make sure it get executed after page load. Outside <body> or <head>, your <script> is somewhat in limbo – unexpected side-effects included.
Similar goes for your <meta> tag. Put it inside the <head>.
For valid code and to reduce and even avoid unexpected side effects, surround your complete HTML code with an <html> tag, and define a doctype, e.g. <!doctype html> at the beginning of your HTML. Validate your HTML, for example here: https://validator.w3.org/#validate_by_input

PhoneGap jQuery .html not working with when loading images (Only in device, working fine on browser)

I am replacing a div in PhoneGap android application.
Both below codes work in browser, but code 01 not working in the device.
Code 01 (Not Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('<img class="img-responsive" src="images//2000.jpg">');
Code 02 (The Working Code)
var selected_floor = $('#select_floor').find(":selected").val();
$("#image_area").html('Hello World');
Why Code 01 not working in the device? How I solve it?
Additional question :If I getting this type of question (working on browser, but not working on the device) how should I debug it on the device to know whats going on?
Update
Carsten Løvbo Andersen suggested to add the ALT tag to image. So I add the ALT images. Now in device it display the value of ALT tag instead of the image. But in browser it display the image.
To debug on a device get yourself an android device, personally I use a HTC M8, this allows you to USB into your PC and by using the chrome browser and using the URL chrome://Inspect you can view the html and scripts of the application, like you are using debug tools on chrome.
*EDIT
I am not 100% clear on the issue you are facing but remember the routing on a device can sometimes differ, make sure that your image path is correct.
For example to get my images working on my latest application i needed to use
<img src"~/Content/images/image1.png">
Try adding the ~/ followed by the directory.

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Javascript caching on iPad HTML5 fullscreen web application

I'm having an problem where the iPad insists on loading an old copy of a .js file, instead of the current one. Strangely enough, this only happens when the page is in fullscreen mode, not when it's being run from the page.
I'm not using any kind of cache manifest;
When I open the page on Safari, it behaves as dictated by the latest version of the .js;
When I open the page through the icon, it behaves as dictated by the old .js;
Killing the running application, deleting the icon and then creating it again doesn't solve the problem; it's still using the old .js, even while in full screen.
Does anyone have an idea of what's going on?
-- update --
This seems to be an iOS 5 bug.
-- Workaround (a.k.a. ugly hack) --
Simply add some fake http params to the script tag, so that the cache thinks it's entirely another JS:
<script src="js/pentaho-jqm-repository.js"></script>
Becomes:
<script src="js/pentaho-jqm-repository.js?fkn-ios-bug=1"></script>
After using the aforementioned workaround (adding a fake parameter to the URL) and then changing it back, strangely enough, the problem stopped happening. Of course, in a production environment, one wouldn't be able to do this, so I think I'll just start numbering the js versions so that the end user won't have this problem.

iPad safari don't show loaded images until slide the screen

i have a problem in iPad Safari. when i use Javascript to append image to div using elm.appendChild(img) the images don't appear until the screen is touched. the same code works perfect on IE,Firefox,Chrome,and android browsers.
i have uploaded video that shows the problem. http://www.youtube.com/watch?v=nBN9fThDik8
is it related to the device ? or there some special code for loading images in iPad safari?
or any solution ?
iPad (more so than iPhone as far as I've experienced, although that's just a gut feeling) is notorious for avoiding loading and rendering large resources unless it decides the user is going to see them.
How about faking the user input required to trigger the render, ie the scroll, after appending the image? Sample code here, may work:
function scroll(){
var body = document.body;
var xy = [body.scrollLeft, body.scrollTop];
window.scrollTo(xy[0],xy[1]+1);
window.scrollTo(xy[0],xy[1]);
};
To be called immediately afterwards, eg:
appendImg();
scroll();

Categories

Resources