Fixed element in CSS Grid, differences in Firefox, Chrome | بلاگ

Fixed element in CSS Grid, differences in Firefox, Chrome

تعرفه تبلیغات در سایت

آخرین مطالب

امکانات وب

Vote count: 0

I've noticed a strange difference in CSS grid elements between Firefox (57.0.1) and Chrome (65.0.3325.181).

If you look at this pen in Firefox vs Chrome, you'll see that Firefox preserves the grid position of the child element. Other parameters (like width) are treated outside the flow of the document (text won't wrap within the width of the container column), but it's horizontal and vertical position are maintained.

Here's a sample:

Left div, fixed position

html, body { height: 100%; }
main {
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 10% auto 10%;
  align-items: center;
  grid-gap: 7px;
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

#left {
  box-sizing:border-box;
  display:block;
  grid-row: 2;
  grid-column: 1;
  align-self:center;  
  position:fixed;
}

#right {
  box-sizing:border-box;
  grid-row: 1 / 3 span;
  grid-column: 2;
  align-self: center;
}

#right p { font-size: 1.6rem; }

Is this documented behavior somewhere? Or, is it something that will be coming as standard in the future?

asked 3 mins ago
Brian

...
نویسنده : استخدام کار بازدید : 7 تاريخ : شنبه 25 فروردين 1397 ساعت: 8:41