Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

馃悰 Fix thirds and fill layer in Safari #19194

Merged
merged 4 commits into from Nov 15, 2018
Merged

馃悰 Fix thirds and fill layer in Safari #19194

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee002e2
apply 100% to fill and thirds
Enriqe Nov 8, 2018
28452ab
update css
Enriqe Nov 8, 2018
4495ca1
remove width auto
Enriqe Nov 15, 2018
bf10151
manipulate height only in thirds.
Enriqe Nov 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions extensions/amp-story/1.0/amp-story.css
View file
Open in desktop
Expand Up @@ -260,6 +260,7 @@ amp-story-cta-layer {

/** Grid level */
amp-story-grid-layer {
box-sizing: border-box !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed?

Copy link
Contributor Author

@Enriqe Enriqe Nov 15, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we don't include it, the thirds template won't consider padding for its 100% height calculation. See screenshots below:

No box-sizing: border-box:
image

With box-sizing: border-box:
image

You can also see this in a Percy build: (the right one hasbox-sizing: border-box). And I think this is what we want, is that correct @newmuis?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I believe the box-sizing is necessary here.

display: grid !important;
position: absolute !important;
top: 0 !important;
Expand Down Expand Up @@ -312,6 +313,7 @@ amp-story-grid-layer > * {
}

.i-amphtml-story-grid-template-thirds {
height: 100% !important;
grid-template-rows: 33% 33% 33% !important; /* `fr` is broken in Safari. */
grid-template-areas: "upper-third"
"middle-third"
Expand Down