I'm using google chrome 5.0.307.9 beta under ubuntu 9.10 and it seems not properly render css opacity.
Using "opacity: 0.5;" under both windows chrome or windows/linux firefox make my element half transparent, but this attribute seems ignored on linux chrome. This was working on previous versions.
Any ideas about what's going on ?
For sure this is a bug in google chrome itself. using opacity: 0.5 is totally valid CSS markup, and it will work on the windows [and mac?] versions of chrome.
For now, all you can do is... try using a different browser [firefox/safari/konqueror], or ignore that your div isn't partially transparent until the fix comes.
I know that isn't really a solution, but I don't think there is much that you can do =/
Hope that helps.
This was a bug in the build, I noticed problems in a VM a week ago with this, update your chrome to resolve, current release is 5.0.322.2 Fixed it on the VM here at least, hopefully the same for you.
Related
I just completed successfully transforming my site to CSS Grid. It works fine in Chrome and Firefox but scrambles things a bit in Edge and IE. In Safari for Windows it is also not right, but I believe that is an old version of Safari. I don't have an Apple to try an up-to-date version. Chrome and Firefox seems to have the lions share of usage statistics, so I am probably OK, but I thought I would see if anyone
has other opinions before I publish the site. Thanks for any suggestions.
you can loook at the can I use it page.
For browser which not support CSS Grid u can try a Modernizr Script. Try to look in the docs here
Do you see the rectangle inside the blue div? It make no sense for me that Google Chrome render this rectangle. The page is only having a div with the class "sidebar" and the css is only this:
.sidebar{
background-color:#3756a0;
width:400px;
position:fixed;
top:0;
bottom:0;
left:0;
color:#fff;
}
I removed all extensions in Google Chrome, I've restarted my computer. Only me experiencing this render. I'm not sure how to fix this behavior. Any help?
Edit: I'm using MacOS Sierra v 10.12 and Chrome Version 53.0.2785.143 (64-bit) seem to be the last update possible. The problem appear also for me here: steemconnect.com see prntscr.com/crgo04 . It seem to be not easy to reproduce.
This question is going to have all shots in the dark I think but here are some things you could try:
Set * { all:initial; } to reset all style props to initial.
Switch display from inline to inline-block to block on the div / body.
Does the issue happen in Firefox? Safari?
Install Chrome Canary and see if it happens there.
Try going into the chrome devtools drawers and disable emulation and other options as shown here.
Had a similar problem a few days back. One guy from my team would see similar artifacts when he viewed the website we developed from Chrome running on his Sierra Macbook, while the rest of us who either had not upgraded or did not use macOS did not have this issue.
So, this is probably a bug of Chrome running on this version of the OS and it will get sorted eventually.
Also see this question.
I've had same problem. Calibration of colors in OSX helped out.
Preferences -> Monitors -> Colors
Many of us have been thrilled with polyfills to make IE less of a drag. But my beef is with WebKit. What the hell, WebKit? You're so awesome at everything else; why did you have to go and not implement calc(), eh? ...but it's not a big deal if there's a polyfill.
Is there?
Google is uncharacteristically laconic on this point. So: 0 Hivemind, does such a thing exist?
calc() support has landed in Chrome 19 with the -webkit- prefix! Not sure how long before version 19 gets pushed out to everyone, but it should be within the next few months. Since IE9+ and Firefox already have support, the last holdouts will be Safari and Opera. Fortunately I believe an updated Safari build is likely to be released with OS X Mountain Lion this summer. I'm not sure when Opera plans to add support.
I don't think there is a polyfill for this for Chrome yet ... none that I have found. Best way to get what you need I think is to use javascript. Unfortunately you will have to call that script on browser resize as well.
https://github.com/CJKay/PolyCalc
This is a good start. They have stopped maintaining the project due to most browsers haveing calc available but works well. I have found a couple bugs and fixed them on my sites.
If anyone would like to know my fixes please contact me
I can use FireFox and FireBug, in a pane, I can open a .css file, in real time, as I make edits, I can see those edits reflected in FireFox. This is a very handy and valuable feature.
Without starting a debate over browsers, I would love to be able to do the same thing in Safari. My far too small display on this laptop aside, real time development of css helps me move things along at a very nice pace.
While I am near certain any input manager for Safari would not officially be supported, I am OK with that. I have been playing around with the "Web Inspector", but as far as I can tell, this will not fit the bill for my needs.
Are you doing this on a Mac? You can give CSSEdit a try. It's not free, but has a built in webkit preview
Get the latest version of webkit, it has a much more powerful version of Web Inspector which you can use side by side with the latest Safari (two browsers open) to debug Safari.
Which version of Safari are you using? I'd recommend getting Safari 4 Public Beta, which has a brand new Web Inspector that allows you to edit the DOM real-time (I'm not sure whether you can actually edit a CSS file with it, however).
Steve
You could try installing FirebugLite.
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.