Browsers tend to evolve quickly, but they often do not offer the same capabilities cross-platform. As a result of this, there are many standard tests available to the developers of browser software to test for compliance with modern web standards.
Before making use of a specific capability in your web application, it’s often best to determine which browsers can support it.
Categories: MSIE bugs, Safari bugs, WebStandards, Work Tags: acid, acid2, acid3, browser, capabilities, client, css, html, html5, javascript, standards, testing, w3c, web
I recently found a case where WebKit (Chromium, and Safari) was acting as if ‘overflow-x:visible;‘ was set in cases where text could not be wrapped inside a DIV due to a lack of spaces or hyphenation as it was a java stack trace. In this case I had to explicitly set the ‘word-wrap:break-word;‘ attribute for the problematic DIV.
.breakword { word-wrap: break-word; }
Also, for Unicode languages where there are other rules to complex to describe here…
.wordbreak { word-break: keep-all; }
Categories: Safari bugs, WebStandards, Work Tags: break, chrome, chromium, css, dash, force, html, hyphen, safari, space, unicode, webkit, word, wrap
Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.
textarea {resize:none;}
REFERENCES:
Categories: Safari bugs, WebStandards, Work Tags: browser, chrome, css, firefox, html, layout, resize, safari, style, textarea, webkit
I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.
Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.
The simplest fix, while not elegant, is to an explicit ’style’ attribute on the <html> tag.
<html style=”background-color:black;”>
Reference: