update: I've found a workaround for this, see my own answer.
I have an animation that crossfades back and forth between two images, by changing the opacity of one image that is placed directly on top of the other.
Symptoms:
It works fine it all browsers.
It occasionally stops working after a while in Safari - typically permanently stuck on the opening image, or you see two or three frames midway through the fade with the rest skipped, occasionally you'll get a flash between the two states without any animation.
Occurs significantly more frequent on mobile. Either way always cleared by restarting the browser, but often not by reloading tabs. Sometimes fixed by navigating a new page then using the back button.
I've used will-change: opacity on both images, it doesn't help.
I didn't notice this problem when I was animating the same graphics by changing a single background image URL - but the problem with that was it's not supported in Firefox…
The images are scaled down in the browser - the full size is 1200x1200 in a frame roughly 400x400 - though that doesn't seem excessive, and they've been compressed.
They need to be within a grid because of the layout of the rest of the page (using position: absolute wouldn't give them height.)
Simplified HTML and CSS:
#keyframes crossfade {
0% {
opacity: 0;
}
33.3% {
opacity: 1;
}
66.6% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<img class="start-frame" src="square-start-1200.jpg">
<img class="end-frame" src="square-end-1200.jpg">
/* within a div that has display: grid... */
img {
grid-column: 1;
grid-row: 1;
will-change: opacity;
}
img.start-frame {
z-index: 1;
}
img.end-frame {
/* placed on top of the start image, but needs to be hidden to begin with */
opacity: 0;
z-index: 2;
animation: crossfade linear 20s;
animation-iteration-count: infinite;
}
#### Affected browsers
Safari 14.1.2 on Mojave 10.14.6
iPhone 6S with iOS 14.7.1
iPad Mini 5th Gen with iOS 14.7.1
iPod Touch 7th Gen with iOS 13.7
A workaround - run the animation in reverse:
animation-direction: reverse;
As it's symmetrically in this case, it doesn't matter.
I can't explain it, but touch wood this has proved stable on Safari 14.1.2 on Mojave, and on both iOS 13 (iPod) and iOS 14 on (iPhone and iPad) in normal daily use, with backgrounding the tabs, refreshing them, sleep/wake cycles etc.
I did also try making the animation start at 5% rather than 0 (i.e. having opacity: 0 at both the 0% and 5% marks, but was only changing the direction that seemed to have an immediate effect.)
Adding animation-delay (in the hope dropped/stuttering frames might be somehow related to an image that hadn't finished loading) didn't help either.
You can try with webkit property I think It works Fine check below Ex.
img {
grid-column: 1;
grid-row: 1;
will-change: opacity;
}
img.start-frame {
z-index: 1;
}
img.end-frame {
opacity: 0;
z-index: 2;
-webkit-animation: crossfade linear 20s infinite;
animation: crossfade linear 20s infinite;
}
Related
I have two components and a fade-in/fade-out animation set up for them.
For a brief moment, both components exist on the page at different opacities, and the scrollbar shows up and disappears.
Is there a way to avoid this? A way to start the fade-in animation only after the fade-out animation is done?
The Animation:
.view-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
transition-delay: 0.5s; /* Increasing this doesn't seem to work */
}
.view-enter, .view-leave-to {
opacity: 0.5; /* It should be 1, but setting it to 0.5 allows you to see exactly what's happening */
}
.view-enter-to, .view-leave {
opacity: 1;
}
Any help would be very much appriciated!
To further elaborate on my comment: VueJS transition components support the mode property, where you can specify the sequence of transitions when toggling between two elements.
Since you do not want both elements to appear at the same time when one is transitioning in while the other is transitioning out, you should be using:
mode="out-in"
Based on the documentation:
out-in: Current element transitions out first, then when complete, the new element transitions in.
Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
I am doing a project using the new updated Bootstrap 3 RC1.
There are may new features with the new Bootstrap 3 which are much different than the previous versions.
I figured most of the changes but one I can't resolve:
when the menu has many items it breaks in Ipad and other tablets becuase it doesnt get collapsed like it automatically collapsed on mobile (which is good)
I would like to know how do I "force" ipads to act like mobile and show a collapsed menu or better yet - how to collapse the menu if it has many items and on certain screens and smaller it breaks
here are screenshots of my live project:
-- Menu on Big Screens --
-- Menu on Ipad Landscape --
-- Menu on Ipad Portrait --
-- Menu on Mobile --
I simply want the ipad to act like mobile. notice that the portrait does act like mobile as far as the content but not the menu.
Please read: http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/
The collapsing of your menu is defined in the less files. (Download the latest version from:https://github.com/twbs/bootstrap )
In variables.less you will find #grid-float-breakpoint: #screen-tablet; where #screen-tablet is 768px.
So by default your menu will collapse when the screen width is below the 768px;
The ipad landscape has a screen width of 1024px so the menu will NOT collapse. The ipad portrait screen width is 768 px so the menu will NOT collapse.
See also navbar.less:
// Responsive navbar
// --------------------------------------------------
#media screen and (min-width: #grid-float-breakpoint) {
To change this behavior you have to change the #grid-float-breakpoint b.e set to 767 and recompile your css files.
NB You also mentioned: "notice that the portrait does act like mobile as far as the content but not the menu."
You use "col-lg-" as prefix for your grid rows. "col-lg-" elements will stack below the 992px (ipad portrait) and become horizontal above 992px (ipad landscape).
Just ran into this issue as well. I suggest you visit:
Bootstrap customization
Find the field #grid-float-breakpoint and set it to the screen width after which menu should collapse. There you could use variables from previous section, namely from Media queries breakpoints to set proper points.
Also, take a moment and check through all available variables to change. Creating a well-customized Bootstrap package might save you hours of dev. work, if not more.
For those poor souls who are not using less, you would have to modify the bootstrap.css and change media queries associated with navbar that have a breakpoint of 768px to 992 px.
For example, change
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
to:
#media (min-width: 992px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 0;
}
}
The no less implementations I found didnt work
Couldn't find the styles to make this happen on its own anywhere, ended up finding this - https://coderwall.com/p/wpjw4w
I was able to correct our issue by changing the #media (max-width: 768px) query to 767px instead. One of the links above referenced a 1px issue on iPad which breaks differently and was forcing the mobile version of the website instead.
If anyone is using the standard bootstrap.css file, I had to change it in 3 places:
around line 3780
/*changed from 768 to 992 */
#media (min-width: 992px) {
.navbar-header {
float: left;
}
}
around line 3799
/* changed from 768 to 992 */
#media (min-width: 992px) {
around line 3924
/*changed from 768 to 992 */
#media (min-width: 992px) {
I hope this helps someone :)
I had the opposite problem. On iPad the navbar was not collapsed (as expected), but the styles for a collapsed navbar were applied. I got it solved by changing the media query for the collapsed navbar adding -1 to match with $grid-float-breakpoint as follows:
#media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}
I am trying to do a images gallery for mobile webkit,
The only way it is actually fast enough is using the hardware accelerated translateX .
My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div
You can see an example here, in the callback events section:
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
#-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
Do not use webkit animation for this as it comes back to the default values once played.
Instead define
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%) translateZ(0);
}
Follow Guillaume's advice beyond that.
Use:
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!