I've made a absolutely positioned that starts centered horizontally with width=0 that expands to both sides of the page using .animate(). The effect works as intended in Firefox, Opera, and IE, but Chrome and Safari surprisingly both move the div to the left of the page (almost left=0) before expanding it to 100%. I cannot understand why; I must be missing something. Any suggestions to save my sanity will be forever appreciated..
#panel { position: absolute; top: 110px; bottom: 240px !important; min-height: 200px; width: 0; left: 50%; }
$('#panel').animate({'left': '0', 'width': '100%'}, 750);
I had the same problem but now it is working fine. It is fixed in the latest version of jquery.
You just have to take the latest version of jquery 1.4.3. and replace it
http://code.jquery.com/jquery-1.4.3.js
Related
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 would like to make the Jssor Carousel full width, without resizing height at all when the window resizes. So on a wide screen, it would show more slides and on a narrow screen it will show less, without ever changing height. I don't want the slider to resize, I just want it to cut off, if that makes sense.
So far I've got it working as I'd like in Firefox, Chrome, Safari and Opera. If I'm not explaining it very well, I apologize, you can see an example of how I'd like it to work here: http://jessetessman.com/110/slider.php in Firefox, Chrome, Safari or Opera. Note, when you resize the window you have to refresh to resize the slider.
My problem is, it doesn't work in IE. It just has a width of 100px in IE and I have no idea how to get it working.
I appreciate any help you can give. I realize the way I have it now is probably not the best way to go about accomplishing this, but I am not very good with javascript so I just messed with it until I got to this point. Any suggestions about better ways to do this are certainly welcome.
Thank you in advance for the help.
Please add one line $("#news-slider").width("100%");
var jssor_slider1 = new $JssorSlider$("news-slider", options);
$("#news-slider").width("100%");
Forgot to change following css, make the width to greater than screen width then.
#news-slider {
left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; position: relative;
}
#news-slider .slides {
left: 0px; top: 0px; width: 2400px; height: 350px; overflow: hidden; z-index: 0;
}
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
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}