We have started to see some unusual rendering on our webpages where text is garbled and badly rendered, a screen resize always fixes it. It seems to effect both chrome and firefox.
I am not sure where to begin with this problem as I have never come across something like it before. What can cause this issue and how can it be fixed?
my text
renders badly
Related
Somehow the text on a specific part on my website renders unreadable on Safari, while it renders normal on Chrome or any other browser. What I find even more strange it that it's random whether text will render unreadable or not. Just refresh your browser and you'll see.
This is my website and below you'll find a screenshot of the issue. Left is Safari, right is Chrome.
I've experimented with text-rendering and transform, but I couldn't find the issue that permanently fixes it, without creating a problem in Chrome.
Does anyone has a suggestion to help me and perhaps others having this issue?
I've noticed some strange behavior with both Chrome and Safari on my Mac:
Mountain Lion
Safari 6.0 (8536.25)
Chrome 21.0.1180.89
The page is a simple fixed div with some text in it, I added a second div that does a simple CSS translation over 5 seconds so you can easily see the difference. My web app is using CSS transitions to show and hide portions, and while it was doing this large portions of the screen seemed to shift.
I've placed example code and a .mov file out on a server so hopefully you will see the same issue:
http://physicaltable.com/index.html and http://physicaltable.com/CSS_JIGGLE_TEST_2.mov
The strange bolding doesn't occur in Chrome on Windows 7, nor does it happen on the iPad 2 (v5.1.1)
Has anyone else seen this type of issue?
I realize this isn't much of an answer, but I've found that it's mostly because of the rendering of the elements. If the element needs to use hardware or any other type of graphics rendering, it basically takes an image of the text, adjusts it, then rerenders the text (if it can).
The "taking a picture" is where the boldness is lost, since the browser/display/something is adding the flair that makes the text look good. Of course it doesn't look that good, but that's just me.
I've noticed with different colors other than all white/black, it can behave differently. I'm hoping things will get smoothed out as browsers and rendering advances.
I found solution for this bug
its enough simply force your browser to rerender that at moment move is stopped
E.g.
$("your_element_selector").css("color", "color");
where color can be even same color as your text has
I'm trying to figure out the reason for a weird behaviour in the browser.
The thing is when you start zooming in the webpage, suddenly the background comes in and invade all the content.
I've been walking around this but without results.
Of course the problem is only using IE. It works as expected on the rest of browsers.
Here's an screenshot of the problem and the css code as well.
I have a web site page that doesn't seem to be rendering properly for chrome in safari.
It appears it is rendering the width of the screen with twice as many pixels as other browsers. I suspect it may be the initial viewport settings, which work in all other browsers for windows and apple, except for the version of chrome on mac.
I tried removing the viewport setting but that doesn't seem to work. I am using the latest version of Chrome, and if I have a window open in safari beside chrome you can see that chrome is rendering the screen as twice as wide, even though it takes up the same width.
Oops. I can't post an image, but you can see it here: http://straathof.acadnet.ca/test_chrome.jpg
If you would like to test it, you can visit the page here: http://straathof.acadnet.ca/reblend55
Any help for tracking down this problem would be appreciated. I have no idea where to look.
control-0 removed any zooms that had been added to the web page, which allowed it to render properly at the correct width. Apparently some months ago I zoomed in on something and, even though Chrome was removed reinstalled and reset, not to mention quit and restarted a whole lot of times, it still remembered that errant zoom value.
annoying, but answered with someone elses suggestion.
Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...