I'm using this code to make a element enlarge a few pixels when hovered, but for some reason it's blocking touch event (click) on iOS. Any idea?
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
If the problem is on iOS specifically, it may not be the CSS transform event blocking the touch/click event. In iOS Safari, if you want a div to have a click event, it must either have a directly bound onclick handler, or the CSS property cursor: pointer. This is how Safari knows that a div is "clickable", and it's a weird niche of Safari that I don't think exists on other mobile browsers.
See this post for more details: $(document).click() not working correctly on iPhone. jquery
But in short, I'd suggest adding cursor: pointer to .hvr-grow and seeing if that makes a difference. Your :hover CSS won't register on mobile, so you won't get the grow effect anyway.
Related
I have a strange problem with webkit-overflow-scrolling: touch property in IOS 10 - when the modal has longer content it gets 'stucked' or 'frozen' and not scrollable. First of all, I prevented the pinch zooming on the modal with JavaScript because I thought it caused the problem - no effect. I've also tried all the suggested fixes I could find, and still when the modal is longer, sometimes (not every time) it gets stucked when has been scrolled.
This behaviour definitely comes from the webkit-overflow-scrolling: touch property, because when I remove it or set it to auto, the modal doesn't freeze but the scrolling becomes awful - not smoothly at all.
Could someone suggest me a fix? Any help will be greatly appreciated.
This is part of the code:
.body.modal-open {
position: fixed;
width: auto;
overflow: hidden;
}
.modal-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 2500;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;
&::before {
content: '';
display: inline-block;
height: 100%;
}
.modal {
position: relative;
display: inline-block;
width: 550px;
z-index: 3000;
}
}
I have a html page containing a div that is moving in when clicking on a button by using css transition on the bottom attribute. (change of bottom value is done by jQuery) This is working fine in all browsers (including iOS on iPad). Now I am developing a second page that has to do the same thing. I copied all css properties and the jQuery function but there is always a choppy animation on iOS (only on iOS!!) when the div moves in.
I already tried solutions like:
-webkit-transform: translate3d(0, 0, 0);
or
-webkit-transform: translateZ(0);
Nothing makes the animation be smooth like in the other page where I (as I think) completely have the same code.
Now I have no idea why there is a difference and how I can solve this. Did anyone already have some similar trouble and can give me some helpful advices for that?
Full code CSS:
.animationTestObject {
width: 100px;
height: 100px;
background-color: black;
position: fixed;
left: 100px;
bottom: -100px;
transition: bottom 500ms;
-webkit-transition: bottom 500ms;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
JS:
function startAnimation() {
$(".animationTestObject").css('bottom', '100px');
}
To get a better performance while animating, try to avoid the css properties that trigger a relayout (those marked with a purple tag).
In your case, you should animate the transform: translate property like so:
.animationTestObject {
width: 100px;
height: 100px;
position: fixed;
left: 100px;
bottom: -100px;
transition: transform 500ms ease;
transform: translate3d(0, 0, 0);
}
function startAnimation() {
$('.animationTestObject').css('transform', 'translate(0, -100px)');
}
I have a problem with the scrollbar in the drop down menu in iOS.
I would like it to stay always visible when I open the menu, but this only works on Android and not in iOS. This is the code I have used
::-webkit-scrollbar {
-webkit-appearance: none;
width: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: #E2BC69;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
opacity: 0.5;
}
On CanIUse these properties are available on iOS (tested on iOS 9 and 10). Do you know how to fix this issue?
you could try overflow:visible;
Some html code or even a fiddle can be helpful your question is not clear
I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}
I am using offcanvas for a navigation in Bootstrap 3 that works perfectly fine in a desktop browser when the width of the window is made smaller, however on iOS devices the offcanvas part of navigation simply doesn't show once you click the menu button - it just indents -80% as you would expect - this is the case in both Safari and Chrome for iOS.
It does work in the browser and on Android devices however, just a no-go for Safari and Chrome (probably all browsers) on iOS. I have tried playing around with the CSS extensively - more changes than i can even attempt to list here - no doubt the issue is trivial.
I can't point a finger on what's missing right now, but I did just this the last few days on a site I'm working on. Because of my sticky header, I move the .navbar-collapse to body on small screens, by javascript.
My CSS looks like this:
.navbar-collapse {
max-height: none;
height: 100% !important;
z-index: 1000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 70%;
max-width: 400px;
padding-top: #grid-padding*2;
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
.transition;
overflow: scroll;
}
.navbar-collapse.in {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
And my js, like this
if (windowWidth > 767) {
if ($("#MainNav-collapse").parent().is("body")) {
$("#MainNav-collapse").appendTo("#MainNavBar");
}
}
else {
$("#MainNav-collapse").appendTo("body");
}