有人知道最新的 Chrome 80 更新是怎么回事吗？
似乎
grid-template-rows: auto
即使标记中不存在给定行，也从现在开始占用一些空间。仅在 Chrome 80+ 上发生。
.l-page {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto minmax(1px, 1fr);
/* // 1px is needed because of https://stackoverflow.com/questions/49558290/container-scrolls-to-top-when-children-element-height-changes */
grid-template-areas:
'sidebar primary_bar'
'sidebar notification'
'sidebar content';
width: 100vw;
height: 100vh;
}
.l-sidebar {
grid-area: sidebar;
padding-right: 10px;
}
.l-notification {
grid-area: notification;
}
.l-primary-bar {
grid-area: primary_bar;
}
.l-content {
grid-area: content;
}<div class="l-page">
<div class="l-sidebar">sidebar</div>
<!--<div class="l-notification"></div>
<div class="l-primary-bar"></div>-->
<div class="l-content">content</div>
</div>另见：https : …
我在自己(有点)的SASS/COMPASS"框架"上工作.
我设置了一个变量 - $ sprite - 这是存储所有图像的文件夹的名称.
我是这样做的,所以稍后我可以使用该名称替换为image-mixin和sprite生成.
如果@import"#{$ sprite}/*.png"正常工作,一切都会很棒.
有任何想法吗？
//sprite images folder name
$sprite: "sprite";
//settings
$sprite-sprite-base-class: ".#{$sprite}" - *works*;
$sprite-spacing: 20px;
$sprite-sprite-dimensions: true;
//generate sprite
@import "sprite/*.png"; - normal path - *works*
@import "#{$sprite}/*.png" - path with a variable in it - *doesn't work*
//mixin
@mixin replace-with-image($imageName){
@include replace-text-with-dimensions("#{$sprite}/#{$imageName}.png");
@extend %dis-ib;
} - *works*
我遇到了一个有点古怪的行为。至少在我看来很古怪。
你可以在这里查看：https : //fiddle.jshell.net/mxmcd9Lw/8/show/
主要是当一个元素的高度改变时，它的父元素会自动滚动到顶部（你需要先向下滚动一点）。由于高度变化引起的重绘，偏移顶部似乎丢失了。
body 溢出设置为隐藏.l-page设置为 100vh.l-content body {
overflow-y: hidden;
}
.l-page {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto 1fr;
grid-template-areas: 'primary_bar primary_bar' 'sidebar notification' 'sidebar secondary_bar' 'sidebar content';
width: 100vw;
height: 100vh;
margin: 0 auto;
min-width: 1280px;
max-width: 1920px;
}
.l-notification {
grid-area: notification;
}
.l-primary-bar {
grid-area: primary_bar;
z-index: 2;
}
.l-secondary-bar {
grid-area: secondary_bar;
z-index: 1;
}
.l-sidebar {
grid-area: sidebar;
width: 180px; …