I'm having trouble getting my vertical sliders to work in chrome. They work fine in firefox. Chrome doesn't seem to be calculating the height properly, min-height: 100% specifically.
I've tried a bunch of different solutions with flexbox settings, flex: 1; flex: x x x;, flex-shrink: 0; etc. but can't seem to hit on the magic combination of what and where to put them.
Can anybody see a cross browser solution for this?
(view fiddle in both firefox and chrome to see difference. firefox works as intended)
fiddle
https://jsfiddle.net/Hastig/a5hz35L6/3/
css
html { width: 100%; height: 100%; margin: 0; padding: 0; }
body {
width: 100%; height: 100%; margin: 0; padding: 0;
color: white; font-size: 14px;
background-color: hsla(66, 8%, 49%, 0.4);
}
div {
margin: 0; padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.slider-blocks-container {
display: flex;
align-items: center;
flex-direction: column;
width: 300px;
height: 200px;
background-color: hsla(0, 0%, 0%, 0.3);
}
.slider-block {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
min-height: 100%; /* this seems to be the bug with chrome */
transition: margin 0.5s ease;
}
.slider-block:first-child {
margin-top: -100%;
background-color: hsla(176, 100%, 52%, 0.2);
}
.slider-block:nth-child(2) {
background-color: hsla(294, 100%, 52%, 0.2);
}
.slider-block:last-child {
background-color: hsla(63, 100%, 52%, 0.2);
}
.slider-block-info { text-align: center; }
.slider-block-button {
display: inline-flex;
background-color: hsla(0, 0%, 0%, 0.5);
padding: 2px 4px;
}
.slider-block-button:hover {
background-color: hsla(0, 55%, 38%, 0.5);
}
/* up down buttons */
.slider-control {
display: inline-flex;
background-color: hsla(0, 20%, 90%, 0.8); color: black;
cursor: pointer;
position: relative;
z-index: 100;
padding: 2px 4px;
}
.slider-control:hover {
background-color: hsla(0, 55%, 38%, 0.9);
}
.slider-control-up { margin: 0px auto -26px auto; }
.slider-control-dn { margin: -26px auto 0px auto; }
html
<div class="slider">
<div class="slider-control slider-control-up">up</div>
<div class="slider-blocks-container">
<div class="slider-block">
<div class="slider-block-info">Block 1 information</div>
<div class="slider-block-button">read more</div>
</div>
<div class="slider-block">
<div class="slider-block-info">Block 2 information (Slider should start here)</div>
<div class="slider-block-button">read more</div>
</div>
<div class="slider-block">
<div class="slider-block-info">Block 3 information</div>
<div class="slider-block-button">read more</div>
</div>
</div>
<div class="slider-control slider-control-dn">down</div>
</div>
workaround
Here's a long ugly workaround using position relative/absolute for any of you future humans that find this question. (Requires a lot of specific jquery instructions that I will try to cut down on.)
https://jsfiddle.net/Hastig/ju5br7q5/2/
The nice thing about the way the original method works (in firefox) is that you only have to mess with the margin of the first element to push or pull the entire column of blocks up or down annnnd you can add as many elements as you like with less jquery edits.
