Did Chrome 40 break justify-content CSS overriding?
You are entirely correct in your understanding of the cascade. If you look in the Web Inspector, you'll see the justify-content: center
declaration struck out, but only when you uncheck it (in a similar fashion as commenting it out) can you get Chrome to ignore it.
Perhaps they accidentally broke something in a change between Chrome 39 and 40, as they have a really irritating habit of doing, but I have no idea what.
From the issue that rwacarter linked to, apparently they did something funky with their cascade resolution code in order to accommodate certain changes to the Flexbox spec, which seems to be the cause for this. Again, I don't claim to understand their reasons for doing so, but they seem to have a habit of rewriting things here and there that result in regressions all over the place. Good thing Chrome is on an evergreen rapid release cycle, eh?
Chrome not properly overriding justify-content for flex box
This is a known bug that is fixed as of the latest canary build (42.0.2289.0):
https://code.google.com/p/chromium/issues/detail?id=452606
In the meantime, you can use this jQuery workaround as a temporary fix:
$('body *').each(function(i, el) {
var justifyContents = $(el).css('justify-content').split(' ');
var flexFlows = $(el).css('flex-flow').split(' ');
if (flexFlows[0] == 'row' && justifyContents.length > 1) {
if (justifyContents[0] == 'space-between' || justifyContents[0] == 'flex-start') {
$(el).css('justify-content', justifyContents[0]+' left');
} else if (justifyContents[0] == 'flex-end') {
$(el).css('justify-content', justifyContents[0]+' right');
}
}
});
HTML select list options lose their CSS font-style when there are too many options
I found another issue linked off the issue above https://code.google.com/p/chromium/issues/detail?id=513339 . Basically the Chrome devs decided to disable the option styles after 300+ options because performance reasons.
It is fixed in Canary 46.0.2468.0, so should be in regular Chrome shortly.
This is the revision to fix the problem http://src.chromium.org/viewvc/blink?view=revision&revision=199776
Odd behavior of :first-letter in Chrome
You've done nothing wrong. Apparently Chrome has decided that for version 41, it'll screw up repainting the :first-letter
pseudo-element (incidentally, Chrome is notorious for repaint bugs). If you declare the "menuitemon" class in the markup, it has no trouble rendering the pseudo-element with the negative margin. It's only when you add it dynamically that it screws up.
Fortunately, unlike the cascade resolution bug that affected Chrome 39 -> 40, I was able to work around this very trivially by using a negative text-indent
on the element instead of a negative margin on :first-letter
:
p.unindent {
text-indent: -20px;
/* ... */
}
/*
p.unindent:first-letter {
margin-left: -20px;
}
*/
page refresh causes css to be ignored
It turns out this has to do with chrome handling the 304 response.
Chrome asks for content and receives a 304 response saying it is not modified.
When IIS returns a 304 response it has content-type in it. Chrome doesn't ignore the content type and looks and sees that the content type has been changed since IIS just returns the default type chrome thinks the file is no longer a stylesheet and doesn't load it.
So in order to fix this we made it reload stylesheets everytime.
I have not figured out an easy way to modify the 304 response so that it does not include content-type.
Here is the google issue
https://code.google.com/p/chromium/issues/detail?id=246875
Why don't flex items shrink past content size?
The Automatic Minimum Size of Flex Items
You're encountering a flexbox default setting.
A flex item cannot be smaller than the size of its content along the main axis.
The defaults are...
min-width: auto
min-height: auto
...for flex items in row-direction and column-direction, respectively.
You can override these defaults by setting flex items to:
min-width: 0
min-height: 0
overflow: hidden
(or any other value, exceptvisible
)
Flexbox Specification
4.5. Automatic Minimum Size of Flex
ItemsTo provide a more reasonable default minimum size for flex items, this
specification introduces a newauto
value as the initial value of
themin-width
andmin-height
properties defined in CSS 2.1.
With regard to the auto
value...
On a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to0
.
In other words:
- The
min-width: auto
andmin-height: auto
defaults apply only whenoverflow
isvisible
. - If the
overflow
value is notvisible
, the value of the min-size property is0
. - Hence,
overflow: hidden
can be a substitute formin-width: 0
andmin-height: 0
.
and...
- The minimum sizing algorithm applies only on the main axis.
- For example, a flex item in a row-direction container does not get
min-height: auto
by default. - For a more detailed explanation see this post:
- min-width rendering differently in flex-direction: row and flex-direction: column
You've applied min-width: 0 and the item still doesn't shrink?
Nested Flex Containers
If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto
/ min-height: auto
on items at higher levels.
Basically, a higher level flex item with min-width: auto
can prevent shrinking on items nested below with min-width: 0
.
Examples:
- Flex item is not shrinking smaller than its content
- Fitting child into parent
- white-space css property is creating issues with flex
Browser Rendering Notes
Chrome vs. Firefox / Edge
Since at least 2017, it appears that Chrome is either (1) reverting back to the
min-width: 0
/min-height: 0
defaults, or (2) automatically applying the0
defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and ChromeIE11
As noted in the spec, the
auto
value for themin-width
andmin-height
properties is "new". This means that some browsers may still render a0
value by default, because they implemented flex layout before the value was updated and because0
is the initial value formin-width
andmin-height
in CSS 2.1. One such browser is IE11. Other browsers have updated to the newerauto
value as defined in the flexbox spec.
Revised Demo
.container { display: flex;}
.col { min-height: 200px; padding: 30px; word-break: break-word}
.col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; /* NEW */}
.col2 { flex: 3; background: yellow}
.col3 { flex: 4; background: skyblue}
.col4 { flex: 4; background: red}
<div class="container"> <div class="col col1">Lorem ipsum dolor</div> <div class="col col2">Lorem ipsum dolor</div> <div class="col col3">Lorem ipsum dolor</div> <div class="col col4">Lorem ipsum dolor</div></div>
Override browser form-filling and input highlighting with HTML/CSS
for the autocompletion, you can use:
<form autocomplete="off">
regarding the coloring-problem:
from your screenshot i can see that webkit generates the following style:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) as #id-styles are even more important than .class styles, the following may work:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) if that won't work, you can try to set the style via javascript programmatically
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) if that won't work, you're doomed :-) consider this:
this wont hide the yellow color, but will make the text readable again.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) a css/javascript solution:
css:
input:focus {
background-position: 0 0;
}
and the following javascript has to be run onload:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
eg:
<body onload="loadPage();">
good luck :-)
5) If none of the above work try removing the input elements, cloning them, then placing the cloned elements back on the page (works on Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) From here:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
word-wrap break-word does not work in this example
Mozilla Firefox solution
Add:
display: inline-block;
to the style of your td
.
Webkit based browsers (Google Chrome, Safari, ...) solution
Add:
display: inline-block;
word-break: break-word;
to the style of your td
.
Note:
Mind that, as for now, break-word
is not part of the standard specification for webkit; therefore, you might be interested in employing the break-all
instead. This alternative value provides a undoubtedly drastic solution; however, it conforms to the standard.
Opera solution
Add:
display: inline-block;
word-break: break-word;
to the style of your td
.
The previous paragraph applies to Opera in a similar way.
Reset/remove CSS styles for element only
The CSS3 keyword initial
sets the CSS3 property to the initial value as defined in the spec. The initial
keyword has broad browser support except for the IE and Opera Mini families.
Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
/* basic modern patch */
all: initial;
all: unset;
}
/* basic modern patch */
#reset-this-root {
all: initial;
* {
all: unset;
}
}
- Relevent github repo with a december 2017 more exaustive list
- Related
- Related from MDN
- Related W3C specs
As mentioned in a comment by @user566245 :
this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.
JAVASCRIPT ?
Nobody thought about other than css to reset css? Yes?
There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310
getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:
answered Feb 9 '13 at 20:15 by VisioN
var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
var element = allElements[i];
// element.style.border = ...
}
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.
For comparison, here is Firefox 40.0 values list for a<blockquote style="all: unset;font-style: oblique">
where font-style: oblique
triggers DOM operation.
align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;
Related Topics
Centering a Single Column Using Bootstrap 4 Grid System
Why Does Fixed Positioning Alter the Width of an Element
Animating a Smooth CSS Grid-Column Change
CSS Background Color Keyframes Animation
Less: Can You Group a CSS Selector with a Media Query
Placing a Fixed Element Above Browser's Scrollbar
Trouble (Vertically) Centering Text in Another Div with Relative % Sizing
Why Is Padding to a Wrapper Div Looks Different The Margin to an Inner Div
Media Query for iPad (Landscape) Applied to Samsung Galaxy Tab 2 (Landscape) as Well
Css: How to Increase the Size of a Osx Submit Button
How to Use CSS to Distort Borders So They Look Like Sketched
Css: Problems When Using Object-Fit and Transform Together on Webkit
Create CSS Grid Layout with Pure CSS