We Keep Coding

What can cause chrome to display a web page all smudged and how to troubleshoot? (image included)

What could cause Chrome on mobile to display a web page appears to smudge elements when scrolling the page, such as the below image.
The page uses many icons from Fontawesome and uses Google fonts (font source NPM package), reactjs, jQuery and is packaged using webpack. It includes multiple webpack bundles on the same page.
What could be the approach to troubleshoot this issue?
The example below is at URL https://uquiz.com/DlVmXD:
The issue appears to have surfaced with the inclusion of the additional react component further down the page that shows suggestions of other content. Apparently it doesn't happen when the suggestions aren't displayed such as on this embed URL of the same content: https://uquiz.com/quiz/embed/DlVmXD/what-romance-trope-are-you?embed=true
I have tried it on many devices and it is fine and thousands of people are successfully able to use the page without issue every single day, but many people are reporting this issue. Every person that I have investigated is using Chrome on a mobile device.
I can't find anything to do with this behviour on the githubs for the main libraries that I use so I'm left thinking it could be a hardware issue. Could it be?

Responsive JavaScript Menu Not Showing in Mobile View

I implemented a navigation menu on this website. While the menu works very well in desktop mode, it will not work in mobile viewing. I think there is an issue with connecting to the JavaScript - https://alexandrachel.org/scripts/script.js
The navigation menu should work like this website
How I can get the navigation menu in mobile viewing to work?

Your whole site is not responsive, so either write media query to make it responsive , or else for minimal responsive you can use bootstrap framework which is lightweight and easy to use and for more responsive mobile menus also you can use smart menus . So, its your choice either you write raw custom code or use the resources.

What the script does, is it changes the CSS for the small displays, so the menu is transformed to become a drop-down on handheld devices. However, the current problem is that the script cannot start, because it cannot find jQuery. And thus, on small displays, the CSS is incorrect and your menu is not visible (however it is there, and functional).
If you load your webpage over HTTPS (as in https://alexandrachel.org/), then the scripts and CSS files should also be requested via a secure protocol.
Try changing a request to jQuery to (note https://):
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
And you can remove the second request of version 1.10.2 from googleapis.com, since you are already pulling the latest version from jquery.com.

Errors in loading your website ref: Chrome Dev Tools
jQuery can't be found plus a lot of your content is being served over http whereas the main website loads on https so just fix those requests and import jQuery.
And this should work
Ref: to the attached image for the errors

White screen after load page in cordova android app - Android 5.1

I have an Android - Cordova Project.
When index.html (main page) page is loaded, on Android 5.1 (real phone) only shows a white screen.
When I minimize app by the phone's home button and go back again, using task manager, the page loads normally as expected.
I found a similar question, where someone argued about WitheList plugin which I added to my project.
Answers are likely about to make a delay using setTimeout, which I applied, with no success.
I have some local css and js files in index.html.
In onDeviceReady.js file, I call load method to set the html content for a div, add some click button functions and re-size some divs in setTimeout and an addEventListener.
What's the reason for this?

Waaaauuu!!!
I upgrade my jquery to v2.2 and my problem solved!. It is a new challenge and new experience.
I start debug with a real device with Android 5.1.1 (Samsung S6) and see that there is an error: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
But after search I don't find any useful answer (like this).
I guessed that one or more javascript file(s) make this bug (white screen problem), so I remove all js files tags from index.html and add one by one.
Yes, my jquery file version cause problem. I upgrade it from v1.11 to v2.2.

Jquery image slider doesn't work on macintosh

My jquery image slider doesn't work on Macintosh at all. It works fine in Windows on all browsers. Can anyone tell me why? I'm very new to this. I believe everything for the slider is here. I can post the rest of my css if needed.

Could it be because you've specified images on a C: drive, which does not exist on the Mac? Can't you just use relative paths, and put the slider/images directory in the same directory as the rest of your project?

Getting a web-font to work on an HTML5 Windows Phone App?

I'm building a Windows Phone 8 HTML5 app that shows an external website on the web. When the page loads, it shows all the content along with the correct css styling except for the web font. The web font is not included in the project, it is run from the website online. Also, I know javascript is running because other javascripts are working on the page. Does anyone know a solution to get web fonts working inside apps? If it helps, when I direct the main web browser in Windows Phone 8 to the webpage in question, the webfonts load fine.

Custom fonts can be used in Windows Phone 8 HTML5 apps in the same way as they are used on websites and other mobile platforms' webviews. There are two things to watch out for,
Within Visual Studio make sure that the font's Properties>Advanced>Build Action is set to "Content" so it is copied to the device when the project is built and deployed.
Make sure that the font you are using is licensed for embedding and that the embeddable flag in the truetype font is set to 0 to allow embedding. iOS and Android ignore this embeddable tag but IE10 respects it.
You can inspect the embeddable flag of any truetype font using the open-source TTFEdit. You can make a font embeddable by changing the value in View>Show>Advanced>Legal rights for embedding to 0 and re-saving it. Only change the flag if the font is licensed for embedding.
I've tested with a number of truetype fonts with no problem. My only issue so far has been when including the font-awesome library where the src: values in font-awesome.min.css needed changing to fix a bug in IE10 mobile. When using font-awesome,
src:url('../fonts/fontawesome-webfont.ttf?v=4.0.3') won't work. src:url('../fonts/fontawesome-webfont.ttf') will.