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.
Related
Been using bootstrap for awhile and its now just had a small hickup.
Getting the same issue on their example. So for cleaner code ill use theirs...
http://newsapps.github.io/bootstrap/examples/navbar-fixed-top/
Win 8.1 pro
Using chrome 41.0.2272.101m (also just updated to this.. so noticed on previous version)
Disabled all extensions, also uninstalled and reinstalled, cleared cache.
Screen res: dual screen = 1920x1080 and 1680x1050
Problem: No nav bar content. Its rendered at over 7000px wide, and content is floated right or centered.
If I resize my window to say 700x400 the navbar gets a width of 2943px.
Also of note is that now the jumbotron on that page is now not display..
Its .container gets 1170px width? Reappears though when resizing.
Debugging chrome on my own site it appears that the viewport meta tag may be a cause. Removing that it performs fine, But also removing the position:fixed solves it. Though naturally leaves it with styling issues...
Using Dev tools and selecting a device works fine. No device, no menu....
Its like the viewport and media queries are not working correctly but ONLY on my PC?
I cant reproduce it on my home PC or work colleges. I cant find any info on it and for a responsive site the view-port is needed.
Driving me nuts.... quick fix, use FF but if clients get this issue or others have it?
Cant add screenshot as < 10 rep (sorry..)
For anyone interested.
After clearing the cache, uninstalling, resetting all settings and nothing working I decided to play around again in the 'device mode' pane again, as I figured this is the most likely place it'll be due to the view port meta tag seeming to affect it.
I use this pane to test sizes and resolutions and then turn it off. BUT there must be some sort of setting in that that stuck. Un-ticking everything and changing devices doesnt work..(and resetting didnt either) but you will notice a circle icon with a cross in it in the top left. Like the 'ban' symbol and hovering over it will say 'reset all overrides'. Click it..
No idea HOW an override gone in there, or why resetting the browser, uninstalling etc would not reset them.. or where you can find them, but there you go. Problem solved.
#Logan I was having the same issue. Resetting the override doesn't work for me but switching Chrome to a new user does, bizarrely.
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.
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
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.