Text renders unreadable in Safari, while perfect in Chrome - css

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?

Related

Text not appearing in Safari?

I am having trouble making http://jackwaghorn.com/#popup usable in Safari. Chrome hasn't been a problem but when it comes to text appearing in an overlay DIV - nothing comes through in Safari. Unless you press 'new tab'.
http://i.stack.imgur.com/zbUAf.jpg
You already found the problem. We call it Safari. If you use Safari for Windows you cannot optimize the webpage for this.

Bad rendering - fixed by resize

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

Self-fixing 'broken' floating behavior in Google Chome

I am experiencing some weird floating-behavior in Google Chrome within the first responsive project I am working on.
I've uploaded an anonymized version of my responsive header here: http://files.uiux.de/140618_header/
Whenever I visit this page on a desktop with Google Chrome, having no cache of the page, the contact-information in the right-hand corner seem to have a margin-top and 'broken' floating of the icons. As soon as I reload the Page, the position is automatically fixed.
I can reproduce this behavior by resizing the Chrome window to it's narrowest setting, refreshing the page and then resize Chrome until the contact-information shows up again.
I am baffled by this behavior. Firefox and Safari work just fine. Can someone explain to me what is happening there and maybe offer a possible solution?
Here's a screenshot of both the initial rendering and the one after refreshing.

height and width values for css in chrome are too small. Or is the width too large?

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.

css rollover buttons- great in safari,and firefox/ ie but not chrome?

i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.

Resources