Is this a bug in WebKit/Blink?
I'm trying to implement an article summary page similar to that of a newspaper: article summaries flow down and 'wrap' from left to right, exactly as specified in the flex-direction and flex-wrap sections of the W3 specification. The remaining space in a column should be redistributed evenly between the blocks that occupy it (just like flex-grow: 1).
See the JSFiddle.
Firefox appears to have implemented this correctly, but I get a very strange layout from Chrome and Safari.
If this is indeed a bug, is there a workaround?
Firefox:
Chrome/Safari:
If you change max-height: 24rem to height: 24rem; then it works in Chrome.
It looks like Chrome is calculating the height based on the smallest block.
body {
background: #C6C2B6;
}
section {
background: white;
display: flex;
flex-flow: column wrap;
align-content: flex-start;
height: 24rem;
}
article {
background: #48929B;
flex: 1 0 auto;
min-height: 10rem;
width: 4rem;
margin: 0.5rem;
}
.big {
min-height: 14rem;
}
<section>
<article></article>
<article></article>
<article class="big"></article>
<article></article>
</section>
Related
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
Bump. Any idea? Thank you!
-
Displaying 3 slides/images per view, looped, centered.
With a clean cache, Swiper starts with the last slide and misses the first to the right. Browser refresh seems to fix it: swiper starts/initializes with first slide, no blank slides remain.
The amount of images is dynamic.
UPDATE:
The issue is with the CSS we added:
.swiper-container {
width: 100%; height: 100%;
margin-left: auto; margin-right: auto;
}
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
}
.swiper-slide img {
height: 550px;
width: auto;
}
.swiper-slide:nth-child(1n) {
height: 550px;
width: auto;
}
Removing the very last bit (nth-child) resets the slider to always start with the first slide. But the images stop sitting next to each other, but instead are spread apart.
Created this to demonstrate a little quicker:
http://jsfiddle.net/L3b1fzh9/13/
You can remove the last few lines of CSS, because .swiper-slide:nth-child(1n) matches every single .swiper-slide element, so this selector doesn't actually do anything (n is a set of all integers, so when you multiply by 1 you just get 0, 1, 2, etc.).
The reason why the images stop sitting next to each other is that their parent container .swiper-slide has width: 100%. You need to change that to width: auto and add margin: 0 auto to center the slides.
So your .swiper-slide CSS becomes:
.swiper-slide {
max-width: 1200px;
height: auto;
text-align: center;
line-height: 0;
width: auto !important;
margin: 0 auto;
}
And just remove the .swiper-slide:nth-child(1n) CSS.
Updated fiddle
I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:
Something on the page animates using the standard CSS transition property (not transform)
The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
The video is absolutely positioned (used to hack a scaleable ratio)
I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.
Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.
.anim {
width: 50px;
height: 50px;
background: grey;
transition: all 0.2s linear;
transform: rotate(0deg);
color: white;
display: flex;
align-items: center;
justify-content:center;
}
.anim:hover {
background: black;
transition: all 0.2s linear;
transform: rotate(90deg);
}
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="box" class="anim">
<div>
Hover
</div>
</div>
<div id="video-container">
<video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
</video>
</div>
Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?
Such situations with transitions/translates on page you can very often resolve using "magic" transform: translateZ(0) for parent or children elements (depends on situation).
In your case it is enough to add this transform to the #video-container:
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
transform: translateZ(0);
}
Applied solution jsFiddle
This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.
In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.
UPDATE: As of Chrome 77, this issue appears to be fixed.
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
Please look at this page here.
This is a really straightforward bit of jquery animate() that animates the title text up to the top of page - that's all!
In FF and Opera it's perfect.
In IE9 it jumps first to the bottom of the page and then animates up.
In Chrome it jumps to the top of the page and then animates down!
wtf!
The jquery call is:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '75px'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
and here's the css for the elements involved:
#name_holder_wrap {
padding: 0px;
width: 100%;
position: absolute;
height: auto;
top: 45%;
}
#name_holder {
padding: 0px;
width: 600px;
height: auto;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
cursor: pointer;
}
(Sorry, I haven't quite got my head round how to insert code into these posts properly - can't get those closing curly braces to include in the code block - I am trying!)
So, I'd really appreciate any pointers on this - i've been wrestling with it for some hours now and really need to get on!
Many thanks in advance!
Scott
Works fine for me in IE9 for me too, but a fix for Chrome would be to animate to a percent value instead of pixels:
$(function(){
$('#name_holder').click(function(){
$('#name_holder_wrap').animate(
{top: '15%'}
, 500
, 'swing'
, function() {
$('#name_holder').attr({"style": 'cursor:default'});
}
);
});
});
If that dosen't work, you could change the percent value in the css, maybe with help of some javascript.
The problem here is the combination of CSS and JQuery, which need to be correct in order for both IE and Chrome to work as you would hope.
Here's how I have things set up and it worked fine.
.object_to_be_animated {
position: absolute;
left: 0;
top: 96px;
width: 259px;
height: 85px;
background: url(...) left top repeat; }
The important thing here is that I have absolute positioned my element using TOP, not bottom.
I then structured my Jquery like so
function slide_up() { $(this).children(".overlay").animate({top: '-=51px'}); }
function slide_down() { $(this).children(".overlay").animate({top: '+=51px'}); }
$(".rolloverLink").hoverIntent(slide_up,slide_down);
Remember to use the same units with your CSS and JQuery, I'd recommend using pixels as it keeps things precise. Don't mix em, px, %.
This should hopefully fix the issue