I have a really strange problem where CSS 3D transforms work sometimes and sometimes not. Before upgrading to the latest version of Chrome it always worked but with version 16 it only works at random.
More specifically it seems the -webkit-perspective doesn't take which makes everything flat (although the elements still get transformed). Changing the perspective in Chrome's "firebug" after the page has loaded doesn't affect anything either.
The page in question is here: http://exscale.se/__files/uploads/jquery-3d-circle.htm. I know there's quite a lot of code but the stuff related to the 3D transforms are all in this CSS file: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss
My question is: do you experience the same problem with my page or have you ever experienced this yourself? And if so, can you think of anything that triggers it?
I should mention I'm using Ubuntu 10.10 and Chrome 16.0.912.63.
Chromium blacklisted your GPU and refuse to do any 3d CSS.
the solution is pretty easy: turn on "override software rendering list" option in "chrome://flags".
see https://github.com/bartaz/impress.js/issues/40
Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.
Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.
Here's something that I found that may be the issue. When you use the code
-webkit-perspective: 600px;
You need to have that in the parent of the element you want it to affect. If it's in the actual element, it need to be combined with the transform, like so
-webkit-transform: perspective(600px) rotateY(45deg);
Related
This might be a stupid question, but I have a scenario where I fixed someone's webpage, and it is looking good on all major web browsers on my Windows machine. However, when I uploaded the website to Adobe BrowserLab, and when I looked at Safari and Firefox on a OS X, the footer is a bit off from Safari and FireFox on a Windows operating system.
My questions are:
Is there a way to target only Safari and Firefox on OS X and not touching those on a Windows? I mean, is there a way to create a stylesheet only for OS X?
Or are there any conditional comments (for example, ) that targets Mac OS X? If not, are there any other ways?
Or, am I F out of luck?
Thank you people!
Best practice: Try to fix it without doing user agent detection. Analyze the problem, you could try to ask specific advice on your problem here. Especially Gecko and WebKit rendering engines behave almost exactly the same on each platform, bugs should be easy to squash.
If you really can't fix it, you can do JS browser detection, and include a CSS dynamically.
detect: http://www.quirksmode.org/js/detect.html
insert css: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
This is a bad practice however: whenever you make changes, you need to change each css for each browser.
You can target browsers specifically normally firefox chrome etc work roughly the same and ie may work slightly differently.
A way to target browsers is described here
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
http://reference.sitepoint.com/css/conditionalcomments
Yes, but this is rarely the right approach. I'd imagine that it's a font issue - perhaps you are using a font that is only on Windows, or one where the OSX version is slightly different.
If you did want to do this, you could either use a server side language (for instance, PHP) to check the user agent, then include an extra style sheet, or use JS to add the styles using the same technique.
When researching this, any info on CSS hacks should be avoided at all costs.
This is a good way to do this: http://www.quirksmode.org/js/detect.html as it avoids hacks, and produces an easy to use object containing the relevant information.
I would only use this technique in dire situations - in all the sites I've ever made, I've never had to do this, other than for old IE and iOS.
You can use JavaScript to target specific browsers but also operating systems for the browser.
http://www.javascriptkit.com/javatutors/navigator.shtml
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's for my own wedding, so "the client" doesn't care that not all users are getting the same experience).
This works just great in Firefox, Safari, and Chrome. It basically doesn't work in IE (including IE9), or Opera. I haven't tested anything else.
My question is, what is the best way to handle giving IE (and, I suppose Opera) users either (a) a redirection to a different page, or (b) show them something else (probably a screenshot).
I would prefer not to use javascript, because I suspect if they are already having trouble viewing the page, problems on their end with javascript are quite possible.
It works fine in Opera 11 / Windows.
You should consider just making it in good old HTML/CSS - it's not a particularly complex layout.
Alternatively, use javascript on your parent page to redirect users of IE to a static PNG version of your SVG.
IE8 simply does not support SVG without a plugin - javascript will work just fine on the page. However, SVG is supposed to work in IE9, so I'm not sure why yours doesn't. I don't yet have IE9 here, so I can't test.
ForeignObject is probably the answer why it doesn't work. Given that your svg is quite simple, I'd suggest removing the foreignObjects and using svg text and tspan elements instead. That should make it work in all browsers. And seeing how you used inkscape to create the svg it could have done all the linewrapping etc for you anyway.
From other answer about flow-elements in inkscape:
Inkscape can generate <text> and <tspan> for
you quite easily, just don't click and
drag an area but instead just click
where you want the text and start
writing, then press return where you want a
new line.
I'm not sure if IE9 supports foreignObject.
There's a way to do automatic linewrapping in svg tiny 1.2, which is supported in Opera, a workaround solution could look something like this. But to get IE9 compat too, you'll probably have to go with text+tspan.
Here's something interesting, turnsout that many people out there had this problem, but i couldn't find a solution:
Problem is related (and observed) only with IE8 and IE7:
If i add filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEBB', endColorstr='#FFEEBB',GradientType=0 ); to css "body" then all fonts on my page are messed up! If i remove "filter", font's are back in normal.
What's wrong?
P.S. Messed up -> Fonts look jagged, exactly like there's no cleartype!
Internet Explorer disables ClearType rendering in all elements that use a DXTransform.
There's a workaround described here that involves a relatively positioned wrapper element. It seems to be working in IE8 at least.
That looks very much like a proprietary Microsoft filter. Unless you know that 99% of your website users use ie, don't use those filters. Of course, if you are using this in an ie-specific style-sheet, to complement another style-sheet for proper browsers, you can use that filter without ruining your market.
Either way, I would highly recommend not using an ie-specific filter (or anything ie-specific really). Instead you should recommend to your users subtly to change to a more compliant browser, with less security holes and privacy-concerning back doors.
I"m no expert, but it sounds like you are using something that is IE specific. If so, I could not recommend highly enough that you find another way. Gone are the days of IE being the only browser to develop for and doing so will turn away numerous people.
Stack Overflow won't let me post my whole question because I'm an untrusted new user, so if you're interested in this question please visit
http://doctype.com/would-cause-behavior-only-one-persons-ie8
The backgrounds in question are drawn
with a single-pixel, xy-repeated,
semitransparent PNG.
This person's IE8 is drawing this as a
gradient that starts at the top left
corner and becomes more transparent to
the right and below.
I am unable to reproduce this problem
in IE8/WinXP/VMwareFusion/SnowLeopard.
Also cannot reproduce with IE7 (IE8 in
compatibility mode). Also cannot
reproduce with IE6 or any other
browser.
we are running the same version --
only the product IDs are different.
I confirmed at
http://en.wikipedia.org/wiki/Internet_Explorer_8#Release_history
that 18702 is a final release version
of IE8.
Even tho I did not think it would
help, I asked for a list of addons in
IE8 -- nothing unusual.
What could be causing this problem for
just this one person? The person
mentioned that it is a work computer
and the IT people are really strict
about things. Could any workplace
restrictions cause this weird
behavior? Could it be a graphics
driver issue?
Again, I know this is not an IE8
problem because I have IE8 and cannot
reproduce it.
I want to know how might one alter IE8
-- perhaps for security reasons -- so that this behavior is seen? Or, what
would cause one specific computer to
display things this way?
I have encountered this problem before and the only solution I found is not to use a 1x1 pixel image. Try 1x10 it should fix it.
Are any files (graphics, js, css) being pulled from a server that might be blocked by their office firewall?
I've had this happen, where just one graphic was from some off-limits site, with bizarre results.
My guess is that you're using jQuery, and this bug will pop-up on mouseover for random IE7 and IE8 users. I found one possible fix in a www.farmcode.org blog post:
Wrap the body of your page with the following conditional:
<!--[if IE]><div id="ieWrap"><![endif]—>
(the rest of the page html goes here)
<!--[if IE]></div><![endif]—>
and add the following CSS for IE:
#ieWrap .productView .productThumbnail a
{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='grey_overlay.png',sizingMethod='scale');
width:100%;
}
You'll need to change the CSS to match your situation, but this should get you started.