Tiny White Box Displaying only in Google Chrome - javascript

White Box issue only when using Chrome this box does not display in any other browser.
Anyone know of any Css tricks to get rid of it? Funny thing is it displays only for 3-4
seconds and goes away very annoying tho.

It may just be a bug with your browser, have you tried restarting your browser? Also make sure that you didn't leave something in your HTML on accident.

Related

Rendering issue with Firefox 57 (Quantum)

We have gotten some reports and also experienced this ourselves that on random occasions (maybe every third or fourth request) on our "apps pages" the page just becomes extremely long and the "footer" isn't loaded.
So for example on https://alternativeto.net/software/adobe-photoshop/ if you refresh that page a couple of time or go to any other "apps-page" this should happen.
The strange thing is that as soon as i open the inspector everything goes back to normal. Also if i have the inspector open everything works fine (but you can see the scrollbar jumping quickly as the problem appears but goes back again).
I have experienced this both with a Firefox with add-ons but also on a clean profile.
I suppose this is some bug with Firefox in combination with something in our code in the page.
Can anybody maybe point me in the right direction here? I have tried

Chrome sometimes doesn't render Google font until redraw

I'm experiencing a weird text rendering issue on Chrome, where sometimes the text will not render at all until something triggers the browser to redraw.
Here's a screenshot of the issue
And this is what it's suppose to look like.
When it does fail, as soon as I open the dev tools, the font will render in correctly.
When the issue occurs with dev tools already open, changing the font-size will make the text appear.
Interestingly enough, when I set the font-size back, the text disappears again. EG:
$('p').css('font-size', 12); // Text appears
$('p').css('font-size', 13); // And its gone again.
When I remove Google fonts, the problem completely goes away. This is my font reference, I don't think there's anything wrong here?
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
I've found a bug report for what looks like my issue here but it's been marked as fixed in Chrome 34+ and I'm running 49.
I cannot replicate this in any other browsers.
Would love to hear for anyone who might be able to point me in the right direction. If you need any more info let me know!
After a few hours of headache, I think I've found my problem.
Just under the screenshots I posted, there's an embedded Youtube video. Turns out, youtube use the same font we do (Roboto). When I removed the Youtube iframe or changed our app font to another Google font the problem went away. Which leads me to think there's some sort of conflict when downloading the fonts..? I'm really not sure.
I did end up getting Roboto working by including it via Javascript at the bottom of the page (instead of the link tag). Which kept the design guys happy :)

Javascript carousel not loading properly under some conditions?

So I've been working on a website, and the main focus of the site is a javascript-driven 3D carousel, and I got the code for the carousel from here: https://github.com/kaizouman/3dcarousel
I integrated the code into my site, and only modified the number of carousel items and the size of each item. I left the rest of the code untouched (demo.js and 3dcarousel.js). It works perfectly, but only most of the time. I've noticed that it'll work perfectly in Chrome about 90% of the time, in Safari about 80% of the time, and in Microsoft Edge & IE, it pretty much never works. When it doesn't work, it just loads each image individually. When it happens in Chrome, if I keep refreshing the page, it'll eventually work properly. Also interestingly, when I navigate to another page in Chrome and then hit the back button, the carousel will always fail to load.
Here's what it looks like in Microsoft Edge and also when it fails to load in Chrome:
And here's what it looks like when it loads properly:
I can't for the life of me begin to figure out why this is happening, does anyone have any idea? The website is located at http://lipocircuit.com/new.html.
WOW this was a simple fix, I just commented out the line that includes the prefixfree.min.js script, I guess that's outdated and not needed anymore. I feel dumb but I'll leave this up in case anyone else has this issue.

Alert Box "not showing" in Chrome - Off Screen?

I'm not quite sure what's going on here. I'm using the latest Google Chrome, and recently any Alert Box popups don't show up. They're THERE, because I have to hit enter/esc to be able to use my browser again. This is for all alert boxes in the browser. I tried plugging an HDMI cable to see if it was really off screen and maybe I could see it if I extended my monitor, but to no avail.
I saw that there was a bug in 2012 that was similar to this, but that's obviously been fixed and shouldn't be relevant here.
EDIT: Version 39.0.2171.95
Supposing your dialog is indeed off screen, press [alt][space][m].
Then swing around with your mouse or press your arrow keys like hell and your dialog will eventually come in scope.
See also http://www.dpreview.com/forums/post/42206189
I had a similar issue. After much testing I was able to correct this by the following means
Settings> Show advanced settings
Scroll to bottom
Remove the checkmark from "use hardware acceleration when available"

Why is there a full-screen white flash when I load this website?

I am working on a site: http://deel.io
When the page loads, there is a half-second or so white flash that appears on the screen.
The white flash goes away if I comment out the line of code that puts the markers on the map:
markersArray[i].setMap(map);
Yet this flash has only just started appearing, so it must be some other code that is causing the above code now to cause the flash.
I realize this is impossibly difficult to help with unless you've seen it before. That's what I'm hoping for--that someone had this exact thing happen to them and knows right away what I am probably doing wrong.
My code is basically all JS/jQuery.
Please see edit below.
I reproduced the problem using Chrome once, every other time after that I couldn't see the white flash. Even with different browsers.
Your probably going to have backtrack all your changes until the problem goes away to see what you introduced that's causing the problem. Hopefully you've been using source control.
I hope you get more replies - although this is a very specific issue that I could only repro once.

Categories