i have a problem with iScroll 4 and can't find the problem.
I have a homepage which use iScoll4. It is working on iOS7, Google Chrome and Safari. The same page is not working on Firefox 27 and IE11.
The divs:
IE11:
<div id="scrollChild" style="left: 0px; top: 0px; -webkit-transition-property: top, left; -webkit-transform-origin: 0 0;">
Firefox:
<div id="scrollChild" style="top: 0px; left: 0px;">
Google Chrome:
<div id="scrollChild" style="-webkit-transition: -webkit-transform 200ms cubic-bezier(0.33, 0, 0.33, 1); transition: -webkit-transform 200ms cubic-bezier(0.33, 0, 0.33, 1); -webkit-transform-origin: 0px 0px; -webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
Does anyone have an idea what's the problem with FF and IE?
Thanks
Switch to iScroll5. It's much more mature, configurable, stable, simple and comes with much better performance.
look here
Related
Yesterday our client reported strange and undesirable bahavior at his website. Website address is: http://dawidbukiel.pl/#offer, section "offer" (Oferta). It should work like this:
and it does, despite Safari.
After action
#offer > div > div:hover
box with offer details (.offerHover) should appear. At Safari, unfortunatelly, it happenes otherwise. Box sometimes appears, sometimes doesn't and sometimes appears with low opacity.
Main problem is - we don't have any mac device, so there is no way to try and fix it. Do you have any clue what might be wrong? I tried testing old Safari version on Windows, but it seems to be working fine.
I would be very grateful for any ideas :)
I managed to fix it myself.
I dunno why, but it works :D
I just had to get rid of keyframes.
from:
.offerHover {
background: rgba(0, 81, 203, 1);
height: 200px;
margin-right: 0px;
}
#offer > div > .col-md-4:hover .offerHover {
-webkit-animation: jumpOut 0.5s forwards;
animation: jumpOut 0.5s forwards;
opacity: 1;
visibility: visible;
}
to:
.offerHover {
background: rgba(0, 81, 203, 1);
height: 200px;
margin-right: 0px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#offer > div > .col-md-4:hover .offerHover {
visibility: visible;
-webkit-transform: translate3d(15px, 15px, 0);
transform: translate3d(15px, 15px, 0);
opacity: 1;
}
I am using zoom: 0.5; and it is working fine on my site, but when I add moz-transform: scale(0.5); and moz-transform-origin: 0 0; To make the site Firefox compatible, the fixed positioned elements I have become unfixed and not placed in the correct place (to the top and left of where they should be). The site works as intended in chrome, and this only happens in Firefox.
Here is the code
.mobPopUp{
position: fixed;
width: 500px;
height: 200px;
border: 5px solid black;
text-align: center;
font-size: 24px;
font-weight: 900px;
color: lime;
bottom: 0px;
text-shadow: 3px 3px black;
}
#mobPopUpBlue{
right: 0px;
background-color: blue;
}
html{
zoom:0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0
}
<div id="mobPopUpred" class="mobPopUp">Right click on a mob to see their stats here</div>
What am I doing wrong? And how can I have it so it works on Firefox as it does on Chrome with zoom
There isn't really a CSS zoom property, it's just a non-standard property invented by Internet Explorer and adopted by some other browsers for compatibility reasons. The correct property to use for scaling transformations is the transform property.
Firefox has long since remove the -moz- vendor prefix, and never implemented zoom, so that's probably why your code does nothing in Firefox, but for maxium browser support, you can use the below.
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
That will work in pretty much anything IE9 or better. If you need IE8 support, then you might try adding zoom in an IE <= 8 CSS hack.
Link to example. Hover over the book on the left side
As you can see, the book seems to open towards the user.
I already have the first part of the animation: JSFiddle
HTML:
<h1>Boek opendoen animatie</h1>
<div class="achtergrond">
<img class="foto" src="http://i.imgur.com/u19t6iW.jpg" alt="Cover">
</div>
</body>
</html>
CSS:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
}
img.foto {
width: 250px;
height: auto;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
/* -webkit-transform-origin: 0 0;*/
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
-webkit-transform: matrix3d(0.8660254, 0, 0.5, 0, 0, 1, 0, 0, -0.5, 0, 0.8660254, 0, 0, 0, 0, 1);
}
Now this doesn't seem to enlarge the right corners of the book, so it doesn't seem like the cover is coming towards the user.
I've tried -webkit-perspective, transform-style,... but can't seem to get the desired effect.
try this css on image hover
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
I found how I need to fix this.
I tried the perspective and perspective-origin options before but didn't put them in the correct place.
These options have to be put in the parent element (here the "achtergrond"-div).
See w3schools with the quote
When defining the perspective-origin property for an element, it is the CHILD elements that are positioned, NOT the element itself.
The new CSS is thus:
div.achtergrond {
background-color: black;
width: 250px;
height: 376px;
-webkit-perspective: 250px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 100% 30%; /* Chrome, Safari, Opera */
}
img.foto {
width: 250px;
height: auto;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
}
img.foto:hover {
/* -webkit-transform: scaleX(1.5)*/
transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-webkit-transform: rotateY(-20deg);
}
I have this css code for an select tag
.sele {
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.75;
margin: 0 10px 5px 0;
}
.sele:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}
It is working well on Mozilla Firefox but has no effect on chrome or Internet explorer
First of all i would advice you to have a look into this
That's weird... i have tested your code on 5 browsers ( Chrome, Mozilla , Safari , Opera , IE ) and only IE had a problem with the transform which you can solve it by adding the code below:
transform: scale(2,4);
Check the fiddle here
Edit: I don't think you can use this directly on a select option, but you have wrap the select tag within a div and apply that to the div.
Example
This happens in Safari 6 on Mountain Lion and in the latest chrome. (Confirmed on OSX, might not happen in windows)
Please see this page for an example:
http://users.telenet.be/prullen/flicker2.html
Quickly move your mouse on and off the image and look at the text below. You will see it flickering/pulsing.
The associated CSS is below. I cannot make any changes to the .out and .in classes. Only to the item class.
I have tried adding -webkit-backface-visibility:hidden; as I read somewhere that that should fix it, but it hasn't made any difference.
Does anyone have a clue?
Thanks,
Wesley
.out {
position: relative;
display: block;
margin: 0;
border: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.in {
position: relative;
display: block;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.item {
margin: 60px;
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
}
.item:hover {
-webkit-transform: scale(1.3) !important;
-moz-transform: scale(1.3) !important;
-o-transform: scale(1.3) !important;
-ms-transform: scale(1.3) !important;
transform: scale(1.3) !important;
}
I'm facing the same problem: I want to scale an element on hover, and when doing so every text on the page flickers. I'm also on latest Chrome (21.0.1180.89) and OSX Mountain Lion.
Actually, adding
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
to the affected elements does solve the problem.
You said you can't change the .in and .out classes, but maybe you can add another one (.no-flicker) and use it on the affected elements.
Note: This really does seem to help fix the problem in Chrome, but Note it might cause some issues in Safari if you have elements layered with z positioning CSS properties. For instance, on my site it is causing a CSS element to flicker behind the slide transitions of the animated slide show I am trying to clean up.
I have the same problem, but fix it.
Just add the .no-flickr class to any blinking or flickering element in your project
.no-flickr {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
I've had the same problem this morning and found that the best fix was:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
I added this to each of the two elements that make up the faces of the two sided object. Stopped the flicker in Chrome and fixed the backface showing in Safari.