I was working on vertical rhythm of my css framework - it looks perfect in firefox but different in chrome and ie9. Anyone know what the cause?
my framework typography page:
http://kenhty.github.com/Natural/typography.htm
If you are referring to the box-flex grid, then check out the specs of the MDN page on using flexible box. There are a couple issues you're running into...
For one, support is extremely limited. Firefox 18+, Chrome 21+, no support in IE and Safari. As such, you are experiencing issues in Chrome because production Chrome is the only one that actually supports your code, and also you are missing the following styling:
-webkit-flex-direction: column
Yours is defaulting to row, which is causing your issues in Chrome.
More perplexing is that I'm on Firefox 15 and it's displaying your Grid properly... Yet when viewing the computer styles, it doesn't even display your grid styling, as Firefox 15 doesn't yet support it. So I'm actually amazed that you're grid displays properly in Firefox.
Anyway, check out what browsers support it and make sure you are overriding any default settings that need to be overridden.
Related
After a few of my customers upgraded to Chrome v72 they've noticed a few layout issues that were not present in <= v71. From what I've found it mostly occurs when having an element with overflow: auto or overflow: scroll within a parent element that is using flexbox to position its children.
Is anyone else experiencing this? Note this is only occurring in v72, I've tested < 72 and other webkit browsers and can't reproduce it.
Looks like Chrome renders flex boxes with overflows differently since v72. At least parts of those changes were intentional to make Chrome more compliant to the spec and other browsers.
See this issue for details:
https://bugs.chromium.org/p/chromium/issues/detail?id=927066
Update:
We've heard you loud and clear and have decided to revert the change in Chrome 72 to avoid breaking existing sites and to allow developers a bit more time to update their pages.
The change will instead ship with Chrome 73. As such it's still important to make the required changes to avoid breaking it in future versions of Chrome and to ensure compatibility with Firefox.
2019-02-05 22:44:28 UTC
Seems like this shipped in Chrome 73, confirmed by a.xin's answer above.
The quick and dirty fix that worked for me is adding "min-height: 0" to all of the flex children.
I've noticed something really strange; my website (http://wizztune.com) looks absolutely and completely fine in Chrome and Firefox but broken and some sections are missing in Safari. Also, Safari treats my "position: fixed" attributes as if they were ignored. There's just a lot of stuff that seems broken; any idea why is this and if there's any way for me to fix it without rewriting every single line of the stylesheets?
Screenshots - also notice that Safari leaves out a few sections of the page in the second screenshot and breaks the "fixed" elements in the fourth one:
http://wizztune.com/wt_chrome.png
http://wizztune.com/wt_safari.png
http://wizztune.com/wt_chrome2.png
http://wizztune.com/wt_safari2.png
Thank you, any help will be greatly appreciated!
That is Safari for Windows, that project was abandoned many years ago. Your site looks totally fine here on Safari for Mac. Don't worry.
So Chrome and Safari shares the same engine WebKit, although Chrome switched to Blink a while ago, but it is still WebKit (slimmer version). Ideally, if the site runs fine on Chrome, it will be generally fine on Safari too (I'm not talking about the older versions).
One more thing: Chrome is CSS prefix free, however Safari may need -webkit* prefix for some cutting edge features. You can quickly find out on http://caniuse.com/ or Mozilla https://developer.mozilla.org/ if you need.
Good morning all.
Today I'm struggling with the following code: source on jsFiddle
What I have been trying to achieve is a seemingly simple image rollover effect where 'a mirror' of an image covers the original one using some css3 effects.
Chrome 12 transforms the image perfectly
Firefox 5 stops transformation when the image runs into mouse cursor
IE9 - there is no transformation at all, the image is just shaking
Opera - not checked
How do I do this cross-browser compatible?
I think I got it to work in Firefox 5 the way you want. See http://jsfiddle.net/X2eN6/7/
According to CanIUse.com, IE9 doesn't support CSS3 Transitions, so I guess that's why it's not working for you in IE9.
The browsers that support the feature are Firefox (from v4), Chrome, Safari and Opera. But it's worth pointing out that transitions currently require a vendor prefix in all browsers that support them.
A vendor prefix means one of two things: either the spec is not finalised yet, so the feature is subject to possible change in syntax, or else the browser's own support for the feature is not yet considered complete.
Chrome has been supporting transitions for ages, so it's no surprise that everything works there. Firefox has only recently added it, so since they require a vendor prefix, you should take that as a warning that things may not be guaranteed to work 100%.
i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.