Since the newer Chrome version (75.0.3770.80), few images on my website are stretched.
These images are in a div, with theses properties :
<div class="column">
<img
:src="insuranceLogo"
class="insurance"
>
<span>
{{ offer.offer_name }}
</span>
</div>
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.insurance {
width: 100%;
max-width: 150px;
}
Until today, it was working great, but with the new Chrome version, my images are all stretched !
I tried on an older Chrome version, it was ok, so I updated it to the new one : same results, stretched.
My solution is to wrap my img tag inside a div. But I'm curious to know why this behavior changed.
Thanks ! :)
I know this doesn't answer your main question: "why this behavior changed?".
Just posting another possible solution. Setting flex-basis: 0; for the image element worked for me.
.insurance {
width: 100%;
max-width: 150px;
flex-basis: 0;
}
Because the flex-basis computation changed:
https://chromium.googlesource.com/chromium/src/+/3ed97a76cfe8dd422770bcc3b62851333a18ed32
to fix this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=958802
Related
I have been learning Html and css the past three weeks. I am currently building my own portfolio without any external tools, and I encountered a problem that seems to make no sense whatsoever even after googling for similar responses.
The image found in the code snipper is part of a carousel. I have tested the website both in safari and chrome using both iphone 6 and iphone 11 but there still seems to be a problem. This however does not happen when inspecting element on the browser and setting it the the phone view as seen here:
Before "object-fit:contain" was added, the ".carouselContainer" div itself was already getting extended height. Without "object-fit:contain" it stretches the image vertically (only in actual mobile), however with the div ".carouselContainer" keeps the old height of the image, without stretching the actual image, but leaving a big empty gap as observed here:
The website is online and found here. I am grateful and thank you in advance for your help!
.carousel-container
{
display: inline-block;
width:100%;
min-height: 0%;
margin-top: 0%;
overflow: hidden;
position: relative;
align-items: center;
}
.carousel-container img
{
min-width:100%;
object-fit: contain;
max-height: 100%;
}
.carousel-slide
{
display: flex;
height: 100%;
}
<div class="carousel-container">
<input type="image" src="./images/LeftArrow.png" id="prevBtn"></input>
<input type="image" src="./images/RightArrow.png" id="nextBtn"></input>
<div class="carousel-slide">
<img src="https://img.wallpapersafari.com/desktop/1920/1080/74/99/M67dUT.jpg" alt="">
</div>
</div>
Change the min-width to width inside the carousel-container img css.
Also, you might not need other css in here
.carousel-container img
{
width:100%;
}
I try to make site content vertically centered with display: flex; align-items: center; on normal mode. But if content changes and centered element height goes longer than window, it should behave like normal as align-items: flex-start;.
Use-case is that and I will share a sample fiddle belove with you.
Actual problem is that I should not use javascript on this issue, it should be solved by pure CSS code. (I added javascript to just show you how to increase content and see problem.)
If you try to click button on fiddle it will demonstrate my issue click more and see overflow is not run well and you can not see top elements. I need a clever option to make run this, thank you for helping.
html:
<div id="box">
<div>
<button id='click'>
click me
</button>
</div>
</div>
css:
html,body{
min-height:100%;
height:100%
}
#box {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
#box div {
background:tomato;
width: 100px;
height: auto;
}
javascript:
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
});
let me show real-life sample images and then share fiddle to make it more cleaner.
normal mode:
long content mode:
jsfiddle:
link
as it is shown on this image overflow is not true also, it shows top but it is not top of the window.
I'm not sure if this will work for your requirements, but you need to start by changing the direction of the flexbox (you are using the default flex-direction: row but you'll need to switch to flex-direction: column). This will allow you to really take advantage of the dynamic sizing nature of flexboxes in the way that you need.
Since you are switching the orientation of the flexbox, you'll also need to switch your align-items and justify-content values. Since the effect you want is to end up with is justify-content: flex-start, go ahead and switch that now. You'll simulated justify-content: center with some placeholder elements.
Once you are using the flexbox vertically, you can then put in some placeholders that will shrink as the actual content grows. Put an empty div with this placeholder class above an below the actual content. The placeholder class then needs to be styled so that it can only shrink using flex-grow: 0 and flex-shrink: 1 (this works best if all other elements have flex-shrink: 0). It will also need to be styled with an initial height (I used height: 50vh but that might vary based on your needs).
With the flex-direction switched and the placeholders added, the last thing you need to do is set a height or max-height on the flexbox so that the placeholders will actually shrink. I recommend using height: 100vh but you can use something different based on the needs of your project.
Here's the end result (based on your sample code). I've made a few other tweaks (like setting the background on the placeholder) that are pretty specific to the example code and likely not what you need for your actual solution. I also eliminated some unnecessary code (like the styling on the HTML and body).
document.addEventListener("click", function() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[1].appendChild(para);
});
#box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 100vh;
overflow: auto;
}
#box>* {
background: tomato;
width: 100px;
margin: 0;
flex-grow: 1;
flex-shrink: 0;
}
#box>.placeholder {
height: 50vh;
flex-grow: 0;
flex-shrink: 100;
background: none;
}
<div id="box">
<div class="placeholder"></div>
<div>
<button id='click'>
click me
</button>
</div>
<div class="placeholder"></div>
</div>
I solved this problem with javascript but I should not use javascript. I decided to do not use flex center on my project.
So I am sharing this javascript solution to help if someone has the same problem and can use javascript on his project.
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
var el=document.getElementById("box");
if(el.children[0].offsetHeight>document.body.offsetHeight){
el.style.height='auto';
}else{
el.style.height='100%';
}
});
fiddle
I have a project with flex box and currently I am struggling with the view from Internet Explorer 11.
In Chrome, Edge, Firefox everything looks good - after the container the browser window is ending.
But in Internet Explorer 11 I get a white empty space at the bottom.
I have checked lots of different solutions, but nothing is working.
Do you have a hint for me.
Thanks a lot.
I have implemented a flex-container:
.flex-container {
flex-direction: row;
display: flex;
justify-content: center;
width: 100%;
}
And in the flex-container I have two flex elements with these settings:
.flex-container-one {
width: 70%;
text-align: left;
}
.flex-container-two {
width: 30%;
text-align: left;
}
It is likely that there is some padding-bottom value that explorer is using by default for the .flex-container. Also since you didn't specify the height it is being set by the height of the content within and their default values. Specifying the height can solve your issue.
I am displaying a row of images. Here is my html:
<div class="flex">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
<img src="img4.jpg"/>
</div>
Here is my css:
.flex {
display: flex
}
img {
height: auto;
}
I want my images to display in a row. I have not given the imgs any width, so on Chrome the imgs take up their natural width and push out bigger than then screen. This is how I want it to work. With Safari, they flexbox will only take up the full viewport width. I have tried setting an image width, flex-basis, but cannot make Safari use more than just the visible screen. Is there a flexbox issue that I don't know about? What else can I do?
Looks like this is a bug in Safari. Try adding flex-shrink: 0 to img.
img {
height: auto;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
With webkit prefix to support older Safari browsers -- I'd add it to .flex too as james suggests (note to self: upgrade Safari).
I think safari needs the -webkit options for it to work. e.g.
.flex {
display: flex;
display: -webkit-flex;
}
img {
height: auto;
}
This is the same for all options. e.g.
justify-content: center;
-webkit-justify-content: center;
align-items: stretch;
-webkit-align-items: stretch;
This page is a nice reference source for flexbox:
http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
In IE 11 when an item items don't properly center if they have maximum width property. This example however works in Chrome and Firefox.
JS Bin
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
width: 100%;
}
.red {
background-color: red;
flex-grow: 1;
display: flex;
max-width: 200px;
}
<div class="container">
<div class="red">non centered box</div>
</div>
It is a bug. But according to IE Feedback it was supposed to be fixed already.
As a workaround, you can remove flex-grow: 1; if you don't have to use it.
Explicitly set width: calc(100%); so IE knows the box width and center it properly.
I have had this issue as well. In my case I wanted flex-grow but still wanted to limit the max-width. What I do is wrap any css I don't want IE11 to see in #support. IE11 does not support this rule and ignores its contents completely. I will just check for something that has been around forever like text-align so all the other modern browsers can apply the css rule. You can do this for anything, I just discovered this while trying to figure out an answer to this issue.
#supports(text-align:center) {
div {
max-width: 350px;
}
}