-
Notifications
You must be signed in to change notification settings - Fork 3.9k
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.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chrome v48+. layout issue of flex box. #3270
Comments
@jridgewell @sriramkrish85 It looks like |
/to @jridgewell for now. |
This is also fixed by using: body {
width: 100%;
} Note that it's not directly related to the body. It happens when we have two flex containers I think this is instead an issue with the crazy way we define responsive images.
iOS is unaffected because we define width |
@jridgewell So, the recommendation is to just define |
I would say , lets recommend not making body a flex-box? |
@sriramkrish85 @jridgewell Correct: we need to be very careful allowing to change display of the body. It's easy enough to add an extra div if needed. However, I think it's totally reasonable to add
I don't think there's anything really crazy about them. I believe they simply take the available width which is simply much bigger here then the viewport's width. I've no idea, however, why |
That doesn't solve the generic issue, though. I think this is a user beware: you're CSS can affect the page layout.
Why don't we define the width to be the viewport width? |
Agree. Let's do. But under experiment.
Sorry, can you clarify? Viewport width = width for what? |
Do what?
The |
Set body width to 100%.
The responsive width is defined not in terms of viewport width, but in terms of how much space the image has. E.g. based on the parent element's width + padding. Viewport width doesn't give us that. |
Closing this with #3270 (comment). |
@dvoytenko @jridgewell Thank you for giving me good advice. |
When using
flex box
andoverflow: hidden
on chrome v48+, will occur layout problem.Can you modify using amp.js for this issue?
Sample code
http://jsbin.com/qujuhifufo/edit?html,js,output
Related URL
angular/material#6841 (comment)
If you add the bellow css, does not occur issue.
But
*
may not be used in author stylesheets.https:/ampproject/amphtml/blob/master/spec/amp-html-format.md#universal-selector
http://jsbin.com/qujuhifufo/edit?html,js,output
The text was updated successfully, but these errors were encountered: