WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi there!
I wanted to know why my Chrome renders in this awful way the header of my blog:
- https://skitch.com/koolinus/gahug/informazioni-su-google-chrome
Safari, or Firefox (and even old versions of Chrome on Mac) render it well:
- https://skitch.com/koolinus/gahwj/safari
I've seen this rectangular gradient happear everytime (instead) on Windows. Can you help me to solve this?
TIA,
Nicola
The blog I need help with is koolinus.wordpress.com.
That is interesting. The gradient at the top is an RGBA CSS gradient with two declarations, one for moz and one for webkit, and Chrome is a webkit based browser so it should render it cleanly. It looks like the version of Chrome you are using is a DEV release, not a stable release, is that correct?
Same here, tsp. Been that way for months. Chrome 16.
Interesting. I just downloaded Chrome and checked 3 client sites where I use CSS linear gradients and they are b0rked as well. The CSS is solid and compliant so that is not the issue. This appears to be a "webkit" issue from a little online searching and supposedly affects Safari as well though I'm not seeing it in Safari on any of the sites I have CSS linear gradients on, only in Chrome.
It could be that Safari has updated to a fixed version of webkit where Chrome has not.
Google seems more concerned with releasing a new version number every other day than they do about fixing bugs, which is why I've "strongly" recommended my clients use Firefox instead.
I may have found a fix, but it will only work if you had the Custom Design Upgrade. Basically you set a height and width for the body element in the CSS such as below:
koolinus
thesacredpath
body {
height: 100%;
width: 100%;
}I've not tried this, but some are saying it works.
You might try adding that to appearance > custom design > CSS and using the preview in Chrome to see it it takes care of the issue.
Hi Richard!
Thanks for your investigations!!! The strangest thing is that I'm using DEV builds of Chrome everywhere (Mac, Linux, Windows I mean) and this is the 1st time that this happened on a Mac desktop.
Since now, in fact, I thought it was a problem with M$ stuff ...
Here I am again .... I tried with the option of simply adding/including those 4 lines of code but this was the result:
- http://skitch.com/koolinus/ga7h4/schermata-01-2455938-alle-20.38.02
:-(
Hmmm, people were saying that was working, but it could be that there are reasons that won't work on a wordpress theme. I wasn't able to look at the sites they said it was working on.
Try this
body, html {
width:100%;
height:100%;
}The 100% solution that would work everywhere would be to create a PNG image with transparency and a gradient to match what is there and then put that in as a background image and do a repeat horizontally on it. The image would be perhaps 10px wide by 80px tall and make sure that the background is set to transparent when you save it.
Hi guys!
With today's update of the dev release of Chrome things have gone back to normality and I can see the CSS right ... see yourself:
<div class="thumbnail"><img style="max-width:638px" src="https://img.skitch.com/20120125-k2ucp7uqqaf9r54fdsgciqfbfx.medium.jpg" alt="Informazioni su Google Chrome" />
<span>Uploaded with Skitch!</span></div>
Interesting, it's no long the flat, single color stripes, but for me it's still a striped gradient and not smooth at all. (screenshot)
Yes, Chrome updated itself yesterday.16.0.912.77m
Hi Jen ... ad I've written I am using the DEV build, not the Beta or the Stable.
Here's the changelog of my 18.0.1017.2 update....
This topic has been closed to new replies.
