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 :)
Related
I am facing a very weird issue on my latest cordova app and can not find any explanation. Maybe someone has encountered a similar issue and knows what causes it... And maybe even knows how to work around it.
After a iOS user uses an upload form to upload images and then closes the modal of the uploading screen, the viewport seems to be too big for the screen.
Normall the app looks like this:
This is how it should look...
But when I uploaded an image (it goes to Imagelibrary selection, and then back to the app), the following issues appear:
1. Viewport seems too big (specially visible on the fixed footer).
2. The statusbar is suddenly transparent (this is not very important, but still weird)...
The App looks as follows after the error:
How it looks like with the error
Also I noticed, that this happens on another app as well, after the user comes back from a native component (the other app uses a QR-Code scanner and when the scanner closes the same thing happens). Seems familiar, as in this case the picture selection is also a native component...
What I tried so far:
I tried looking at viewport meta tags and change them to the correct scale, but the value never changes...
I tried to force a hard refresh (location.reload()), but it reloads with the same error...
I also tried navigator.app.loadUrl() and window.location both do not change anything
Also, the problem only shows on iPhones. I tested on an old iPad mini, no issues there and Android works like a champ as well...
The viewport is set as follows:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
And the upload is a simple file-upload input :)
** Edit **
Found, that document.documentElement.clientHeight changes after the upload, it changes from 647 to 687... Why though? And how could I reset it?
Any help is greatly appreciated!
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.
After updating Google Chrome browser to the latest 15.0.874.106 version (under Windows 7), my site is experiencing some weird flickering bug.
The text shadows are displaying completely wrong, the text itself is fuzzy and unclear, some parts of code don't work anymore (e.g. right floating, fixed menu)... etc.
For a couple of seconds the site is displayed fine, then it flickers all of the sudden (while still loading) and then the rendering gets messed up. (I think it has maybe some problems with loading of Google Maps v3)
The funny thing is that the old version of Chrome (before updating, on my other computer) is still displaying the site without any problems, and there haven't been any changes in the code in the meanwhile.
In other browsers (as i said, even in the old chrome) everything is OK. Firebug and Chrome's code inspector (CTRL+SHIFT+J) don't show any errors in the code. I have been doing some digging on the Internet and here as well, and I havent't found anything useful.
You can check it out by yourself by clicking here
Thanks in advance.
I have done same settings changes as mentioned above post and now, that weird flicker got stopped, below are the details....
Open Chrome Browser
Click on Settings menu option
Click on Advance setting link in Settings page
Un-Check "Use Hardware acceleration when available" checkbox
Restart you chrome browser
Happy Browsing....... :)
Also make sure to disable not only accelerated-compositing, but also accelerated-2d-canvas.
This is how I start google-chrome on Linux:
/opt/google/chrome/google-chrome %U --user-data-dir=/root --disable-accelerated-compositing --disable-accelerated-2d-canvas
On Windows, you might want to omit
--user-data-dir=/root
Josip Filipović apology where to do that (in Win7 by entering -disable-accelerated-compositing in properties > target field) that part disables hardware acceleration.
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.
If you go to this site, you'll notice a big image in the middle.
If you inspect it, you'll see this.
<img src="http://s3.amazonaws.com/mosaicimages/hmn58067pa">
If you hover over it during Inspect mode, you'll see this:
img[480x640]
And that's normal. The picture should display.
But sometimes, when I browse my site, the image simply does not display. The HTMl is the same. Everything is the same. It's just that the "cache" messes up.
This is what it looks like: http://i52.tinypic.com/1190xu0.jpg
When the image doesn't display, I clear the cache in Chrome browser settings, and the image displays again. After browsing the site again, random pictures disappear.
It's weird because when you inspect it, the code is the same. However, the image says:
img[0x0]
That's very awkward, because the image really is there. it's in S3 and it's fine.
It happens on other pages as well, not just this page. It happens for all images that are in S3.
Some of you may not be able to reproduce it. Some of my friends reproduce it. but if you can, please help, thanks.
Edit: I found a few bug issues related to Chrome? Is this it?
http://code.google.com/p/chromium/issues/detail?id=67373&can=1&q=image%20304&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
http://code.google.com/p/chromium/issues/detail?id=68622
Edit: everything works fine in incognito mode.
Do you get the following warning in the console?
Resource interpreted as [something] but transferred with MIME type [something else]
It may happen if an image is loaded dynamically (i.e. img src changed at runtime on the client) - which was nicely responded to here.
This could also be caused by the browser actually receiving an incorrect MIME type declaration - I don't imagine that would be an S3-specific issue (given the apparently wide range of similar problems encountered) and would rather suggest it could be an issue with a forwarding (corporate?) proxy etc. - this was the case for us when including fonts but never with images.
Google chrome has an excellent report issue located in the settings tab, take this issue to them,atleast they will rectify in future release chrome versions.