I'm trying to scale an image with css transition upon clicking some text.
The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css {transition: transform 200ms}.
It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!
Codepen link: https://codepen.io/anon/pen/oqBJzr
CSS:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
JavaScript:
function checkMarkAnim() {
$('.checkmark').toggleClass('scale');
}
Any pointers on what has gone wrong would really help.
Thank you in advance
Update:
The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).
After a few days of searching what actually worked for me is just Chrome restart.
This is caused by a known issue in iOS.
For more information, see: https://bugs.webkit.org/show_bug.cgi?id=228333
and https://bugs.chromium.org/p/chromium/issues/detail?id=1231712
Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:
.checkmark {
width: 35px;
-webkit-transition: transform 200ms;
-webkit-transition: -webkit-transform 200ms
transition: all 200ms;
}
.checkmark.scale {
-webkit-transform: scale(3);
transform: scale(3);
}
See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb
Related
I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?
HTML:
<div
class="responsive-bg"
data-interchange="
[http://brycekirk.com/man-mountain/small.jpg, small],
[http://brycekirk.com/man-mountain/medium.jpg, medium],
[http://brycekirk.com/man-mountain/large.jpg, large],
[http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
[http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>
CSS:
div.responsive-bg {height: 100vh; width: 100%; position: absolute; }
JS:
$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
Interchange Documentation
Codepen
It is NOT working because you are add custom query after the Foundation has initialize, you have to use Foundation reflow or you can set the media query before init code.
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';
$(document).foundation();
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
I want an expandable tree in a table cell. I got that to work. While playing around with it, I tried to add a transitioned box shadow. That works only at the root level. (JsFiddle).
The problem may have something to do with transitions not working on display (link). But does a display change foul up all transitions, or am I missing something? (I only put in a webkit transition.)
Thanks.
Edit: This might be a possible workaround, since the transition effect isn't working.
Have you tried using keyframe animations? I did some changes in the code. Here's a demo (jsFiddle).
I changed:
/* This transition seems to have no effect. */
-webkit-transition: box-shadow 0.5s;
}
to:
/* This transition seems to have no effect. */
-webkit-animation: shadow 0.5s ease-in-out;
}
#-webkit-keyframes shadow {
0% { box-shadow: 0px 0px 0px #000; }
100% { box-shadow: 4px 4px 7px #000; }
}
I'm trying to customize the facebook like box, and I need to alter the image size slightly. I've been reading around and it seems to be difficult. Does anyone know a way?
You can change the css by adding your own style for
.connect_widget .connect_widget_image{
width: ##px !important;
height: ##px !important;
}
and also
.connect_widget .connect_widget_sample_connection{
width: ##px !important;
}
Did not try but that how I would do it.
Although I think it's not very recommended to change CSS of like button...
I am using Jquery UI datepicker and I am trying to change the background color for each day in a month.
For this I am using beforeShowDay function in Jquery UI date-picker.
As an example I am trying to change the background color for odd days in a month and my script changes only border color.
I am not sure where the mistake is, How do I over ride the entire back ground color in Jquery to achieve the desired result.
please help.
Script Used:
$(document).ready(function() {
//$("#datepicker").datepicker();
$("#datepicker").datepicker({ inline: true, beforeShowDay: highlightOdds});
});
function highlightOdds(date) {
return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
}
Css Used:
.odd { background-color: green; }
hii All I found it myself,
I just modifed the css as given below and it works cool :)
.odd a.ui-state-default {color:white;
background-color: red;
background: red;}
thank u all :)