I have some issue on image rendering. I had same issue on several times while browsing stacoverflow and some other web sites.
This is the different
Bad Rendering
Good Image Rendering
what is the reason for that?
Does this happen in any browsers or just chrome? Do you use Vodafone?
If it's not just chrome, maybe your carrier compress images - vodafone does this, when you use their mobile connection.
Related
my html/css works fine with chrome, FF and IE11. Also with IE8 when loaded locally from my harddrive.
When the same files are located in an networkdrive the css seems not to work properly. Colors and fonts are fine, but some div-containers are displayed at the wrong positions.
When i transport the files in the htdocs of an apache fonts and colors are fine, but other problems occur with the positioning. Strangly not the same as when started from the networkdrive. Some divs are now correct, others ar now misplaced.
I´m not able to find any pattern with this.
I can check the behaviour within ff and chrome with the build-in dev-tools. But i don´t know of any similar tool within IE8.
Any idea for my 1001 attemp to fix the problem?
Thanks a lot!
Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in Local Intranet
security zone, it will be rendered in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.
I'm making an old website with HTML. I used the reset.css and I can see this perfectly on the web (http://www.ceachile.cl/revista/) with Chrome, Firefox and IE10, but my client can't see some elements properly. I don't know what else can I do to fix this table that is in a wrong place. Here's a folder with a lot of screenshots of the site in many browsers and OS.
Some snapshots of what the website looks like under various browsers can be found here
You have to check with elements of HTML and CSS each of the browsers support. Trident has historically been behind in implementing a lot of newer features. If you aim to support older browser, you have to look at their documentation and write code based on what they can handle.
Take a look at http://msdn.microsoft.com/en-us/library/bb250496(v=vs.85).aspx for ie7.
If you know your client's OS and browser version, you can use a service like www.browserstack.com to test your website in this environment and debug it with the usual developer tools.
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
I want to generate a thumbnail of a web page in the browser, so I can have multiple scaled down iFrames within a single page.
IE can do this using filters. Mozilla can do this inside a <canvas> with drawWindow() if you have Chrome privileges (like an installed plug-in).
Is there any way to do this in WebKit? Is there any generic cross browser way to do it?
I know you're looking for a client-side way to do this, but considering the spotty support across the board you may want to look into generating the thumbnails on the server.
khtml2png allows you to generate webpage images from the command line. It's not the prettiest solution, but with a little scripting it would allow you to generate thumbnails on the fly, and you wouldn't have to worry about browser compatibility.
WebKit's nightly build (41944 from March 24 2009) has support for transforming elements (including scaling) as well as other goodies like CSS gradients.
There is more information on the WebKit blog and here.
I'm guessing this features are also available in Safari 4 but I haven't checked.
edit: It looks like this is also making its way into Mozilla as -moz-transform.
What, if any, considerations (HTML, CSS, JavaScript) should you take when designing for Google Chrome?
Chrome uses Webkit, the same engine as is used by Safari, OmniWeb, iCab and more. Just code everything based on the standards and verify in each browser.
I think first and foremost you should focus on using HTML and scripting that follows the standards.
After you have that running, file a bug report then make the browser-specific tweaks. If Chrome is worth a flip you shouldn't have to tweak things for it.
The same ones you'd take for Safari, as they share the same rendering engine (with a slight version mismatch).
I'm sure filing a bug report really helps with all those IE rendering issues!
Realistically, you need to test your application in each browser, no browser 100% follows the W3C standards so ultimately you can't rely on following that at all. You need to test everything you do in any browser you wish to support.
As has been mentioned, Google Chrome has the same rendering engine as Safari/iPhone/etc., WebKit which passes Acid3, so there should be minimal issues if you follow the standards. But don't rely on it. Google Chrome currently uses a slightly older version of WebKit than Safari. I'm sure they'll eventually be on the same version at some point, but unfortunately any new browser becomes just another browser to test in.
Are you designing specifically for Chrome, or do you want to make sure your pages work well with Chrome?
Assuming it's the latter, then just use the same design considerations you'd do for any browser. If applicable, keep in mind that many phones and video game consoles have web browsers now.
Chrome uses a new JavaScript engine, so you'll have to test your JavaScript using Chrome as well as Safari. The HTML and CSS may render pretty much the same, but they use different JavaScript engines.