I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
Related
Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform
I've just started a new project for my clan. First i worked in chrome, but one of my friends told me there was a strange problem with the site. At the top of the page there is a white space, but this happens only in Mozilla. When i inspect it, it says it's apart html. I've triple checked the css for margins and paddings, but i couldn't find the problem.
Here is the CSS:
https://docs.google.com/file/d/0B8jNXRky-LW_aUw4Z1hXVlVwbHM/edit?usp=sharing
This is quite a strange issue. I see it in chrome also. It seems to go away if I add display:inline-block to .content
I'm looking through it atm but i am unable to find why it requires this. will edit if I find
EDIT:
its the span inside .content it has a lot of margins / padding on top of it, it is shoving everything else down. You need to modify this
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 am pulling my hair out on this one.
We're just about done with the development of an overhaul to our site. As a last step, we're trying to wrap up all the glyphs and icons into a sprite. They're all transparent .png's so the sprite is too. It appears that if a background comes from a sptire, IE distorts it. If it comes from the original file, it does not. FF and Chrome are fine either way.
I am looking at the orignal image and the sprited version side-by-side with grids to see that the pixels are identical. I have counted the pixels in the sprite many times to ensure I'm using the right coordinates. My CSS looks like this:
XXbackground: url(sprite.png) no-repeat 0px -837px; /* lozRedRedSpacer */
background: url(lozRedRedSpacer.png) no-repeat;
The 'XX' lets me toggle back and forth. With the single-file version, it looks perfect: . The sprite-version looks like this: . It looks like it is 'squished' both vertically and horizontally. This does not happen in FF or Chrome.
Any ideas?
EDIT I was able to strip out most of the noise and post an example here. I've added notes to the example to describe my problem.
Thank you so much for taking the time to look at this!
UPDATE We've since replaced these 'overlapped divider images' with CSS pseudo-classes that REALLY do overlap and the zooming issue seems to have gone away. Of course now we have new problems - IE8 gets the z-order wrong and IE7 doesn't understand psuedo-elements at all. But at least the markup is simpler and the zooming issue is gone.
It turns out my problem was caused by IE's 'zoom' feature. Without any zoom, everything looks great like the other browsers. Even 150% or 200% looks good. But 125%, where I had it, causes this distortion. It happens in IE7 and IE8.
I just downloaded the IE8 full release so I could test a site I just created.
[Example Deleted]
Focus on the left sidebar background image. It is suppose to be a 1x1 semi-transparent .png image that repeats. IE8 renders it as a gradient!!! It get's even wonkier when you try to scroll your window or mouse-over the sidebar.
I had already tested this site in the normal browsers (IE7, Firefox, and Chrome). It looks exactly as I designed it in these. IE8 is FUBARed though. I tried to set IE8 to "IE7" mode but it still looks crappy. IE 8 in IE7 mode obviously isn't rendering the same way as the real IE7. Not even the "IE7 meta tag" works.
Has anyone else had problems like this? I thought IE8 was supposed to be a an improvement, not a step backwards.
P.S. Please excuse the crappy markup on this page. I used IE's "save entire page" feature.
It may be a rendering error in IE8, or perhaps it's some function to smooth the edges of repeated images that gives you an unexpected result. Either way it's not very surprising that you get problems using such a small image. Do you realize that the browser has to draw the image 190152 times to render the page?
I am using a 10x10 semi transparent png as background for a div in a page, and it renders just fine in IE8.
I fixed the bug and it isn't the gamma issue that is mentioned in that other post. My issue was being caused by the fact that the image is 1x1 pixel in size. I just changed it to 1x2 and it fixed the problem. Weird
[edit] Just saw Guffa's post after i asked this. See his for answer.
I had a similar issue with a site I'm building. The issue only occurred on 50% of the machines with ie8 it was tested on, I was building it for an IT firm so had access to lots of computers. We were able to "fix" the problem by toggling Hardware Acceleration on the problem machines, not that thats really a fix at all.
Thanks for the help on this issue -- what a weird bug.
I was also experiencing the issue on 50% of the computers running IE8 (had access to quite a few machines). When I had a 1x1px semi-transparent png set as a background image on a div with CSS, IE would render this as a funky vertical, transparent gradient.
Changing the source image to a 5x5px png of the same opacity fixed the bug... go IE!
The problem was my original png was
1×1, and for whatever reason IE8 was
not liking trying to tile that and
handle the alpha transparency at the
same time. When I accidentally saved
that image with a much larger copy I
had on my clipboard, 100×100, it ended
up fixing whatever problem Internet
Explorer was having with processing
the png’s transparency.
Source