The z-index of these images is set so they should be staked blue, red, green but in iOS browsers and Safari on macOS the order is reversed so they display green, red, blue.
Here is a CodePen, the issue effects all iOS browsers and Safari on macOS.
https://codepen.io/W3-design/pen/pBOJyy
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: translateZ(-1000px) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
I would like the z-index to be the same across all browsers.
Here you are:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
}
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: translateZ(-1000px) rotate3d(1, 0, 0, 55deg) rotate3d(0, 0, 1, -30deg);
}
img:nth-of-type(1) {
z-index: 100;
top: 0;
}
img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1, 1.1);
opacity: 1;
z-index: 101;
}
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
Related
I've tried to do animations on hover with animate.css . Everything works, on desktop (safari, chrome) and mobile too(chrome), but not in Safari(iOS).
iOS Chrome | iOS Safari
//main flexbox
.ref {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
//flexbox child
.ref-content {
height: 350px;
//background: grey;
width: 50%;
transition: 0.75s;
background-size: cover !important;
}
// flexbox text
.ref-text {
text-align: center;
display: none;
position: relative;
transition: 2.5s !important;
width: 100%;
height: 100%;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
h1 {
position: relative;
top: 30%;
display: block;
text-transform: uppercase;
padding-bottom: 10px;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 1.5s;
animation: fadeInLeft 1.5s;
}
p {
position: relative;
top: 30%;
font-size: 1.5em;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 1.75s;
animation: fadeInLeft 1.75s;
opacity: 0.75;
}
a {
display: block;
position: relative;
top: 35%;
// animate css použitý ako hover
-webkit-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
text-decoration: none;
background: #fff;
color: black;
max-width: 15%;
padding: 10px 0;
border-radius: 25px;
}
}
// ref 1
//ref1 background
.ref-content:nth-child(1) {
background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
}
.ref-content:nth-child(1):hover .ref-text {
display: block;
color: #fff;
// fadeIn color overlay
-webkit-animation: fadeIn 1.5s;
animation: fadeIn 1.5s;
background: rgba(purple, 0.75);
}
// ref 2
.ref-content:nth-child(2) {
background-image: url('http://lavenderforluck.co/wp-content/uploads/2019/02/modern-home-office-desks-desk-designs-executive-options-for-ergonomics-sydney.jpg');
}
.ref-content:nth-child(2):hover .ref-text {
display: block;
color: #fff;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
background: rgba(black, 0.75);
}
<!-- referencie -->
<div class="ref">
<div class="ref-content">
<div class="ref-text">
<h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
<p>#web #webdesign #forms #campaing</p>
Zobraziť
</div>
</div>
<div class="ref-content">
<div class="ref-text">
<h1>RIVER VIEW RESIDENCE BRATISLAVA</h1>
<p>#web #webdesign #forms #campaing</p>
Zobraziť
</div>
</div>
</div>
Can someone help me to solve my problem?
I've tried to do animations.
I would be glad, if someone can resolve my problem
Any error message, everything is in screenshot :-)
I've tried lot of options to solve my problem but any of them didnt work well...
I was looking for some answers on stackoverflow too, but i didnt find any answer with problem like this...
You will need to create an overlay! and also in class .ref-text you can "play" with opacity:0; and not with the display: none;.
//scss code
.ref-content{
position: relative;
.ref-text{
opacity: 0;
position: relative;
z-index: -1;
}
&:before {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0.35); //put your rgba color here
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
content: '';
z-index: -1;
}
&:hover{
&:before{
opacity: 1;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.ref-text{
opacity: 1;
position: relative;
z-index: 1;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
}
}
This question already has answers here:
Bug in CSS3 rotateY transition on Safari?
(5 answers)
Closed 3 years ago.
Checkout the JSFiddle: https://jsfiddle.net/mavicnz/eph7bmx8/21/
Or CodePen if that's how you roll: https://codepen.io/W3-design/pen/pBOJyy
When I hover over the images on desktop the CSS transition works correctly, it rotates the image and changes the z-index to bring the hovered image to the foreground, the same behaviour doesn't happen when I "hover/tap" each image in iOS in both Safari and Chrome the CSS transition is OK but the z-index is all messed up.
You'll notice when the page loads that the z-index on iOS is not honoured at all and the images are displayed in markup order :(
I would like the iOS "hover/tap" result to be the same as the desktop.
NOTE: I have read some posts about adding translate3d to the img CSS but this doesn't work if you have multiple transforms like I want.
NOTE 2.0: I have used this CSS workaround to target Safari only as that's the browser with the problem.
is there a css hack for safari only NOT chrome?
NOTE 3.0: #Kaiido has provided the work around for this issue on iOS and MacOS, it is linked above.
NOTE 4.0: There is still the issue that the z-index is reversed in iOS, so the bottom image displays on top.
This fixes the z-index issue without the other transforms:
-webkit-transform: translate3d(0,0,0);
This doesn't fix the z-index issue:
-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
CSS: (For those that need it)
.stacked-images {
position: relative;
margin: 20px;
}
.stacked-images img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: rotate3d(1, 0, 0, -55deg) rotate3d(0, 0, 1, -30deg);
}
.stacked-images img:nth-of-type(1) {
z-index: 100;
top: 0;
}
.stacked-images img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
.stacked-images img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
.stacked-images img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
Have you tried prefixfree by Lea Verou?
Try this in the HTML head:
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
I implemented a modal window with partial view using bootstrap, the problem is that when I open my modal it leaves the main view blocked, giving it a black color
When I inspect the item with the console of my browser, I can not find the control that gives the property of the fund to the manners
Incorporate a template of Boostrapwatch for some time in my project, I enclose the code:
.modal-open {
overflow: hidden;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog-centered {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (0.5rem * 2));
}
.modal-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #4E5D6C;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
I have to put some additional class in my modal window?
<div class="modal" id="myModalEditar">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Producto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="EditModalBody">
</div>
</div>
</div>
</div>
do I have to create another css property? What is wrong with this? any help for me?
It's the Bootstrap modal backdrop you'll want to hide. To do so you could add this style:
.modal-backdrop {
display: none;
}
or change the opacity:
.modal-backdrop {
opacity: 0;
}
I've read quite a few SO posts on iOS scrolling issues, I'm aware a few people have had issues. I've tried numerous fixes but I'm absolutely stuck on this!
I'm making a one page website. The layout is a 3D cube, using CSS3 transforms and animations. In a nutshell, the problem is the content on the front face will scroll, the content on other faces wont. As far as I can tell this breaks when I rotate the faces to create the cube. The content in the right face will not scroll, it acts like overflow: hidden;
I don't know how useful this will be, but I've created an Fiddle. It uses on part of the code (the main idea) and the whole lot is quite a bit to post. Has anyone tried to get overflow content to scroll on iOS inside a rotated/transformed parent element before?
I'm going crazy, please help! Thanks!
Here's my SASS from the Fiddle;
body {
margin: 0;
padding: 0;
}
.cube-container {
width: 100%;
perspective: 2000px;
-webkit-perspective: 2000px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
.cube-shell {
position: relative;
z-index: 1;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateY( 0deg ) translateX( 0px );
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
animation-duration: 1s;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: ease;
&.rotate-center-to-right {
animation-name: center-to-right;
}
}
.face {
background-position: 50% 50%;
background-size: cover;
padding: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0,0,0);
position: relative;
z-index: 10;
text-align: center;
width: 100%;
// When we are in "cube mode"
&.cube-compatible {
overflow: hidden;
position: absolute;
// z-index: 5;
top: 0;
left: 0;
right: 0;
// z-index: 0;
}
> .face-inner {
overflow: scroll;
// -webkit-overflow-scrolling: touch;
}
}
.face-inner {
max-width: 1320px;
max-height: 100%;
height: 100%;
width: 100%;
padding: 40px 60px;
margin: auto;
// display: inline-block;
display: block;
vertical-align: middle;
position: relative;
z-index: 30;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
// Center face
.face-center {
position: relative;
text-align: center;
background: #ccc;
}
// Right face
.face-right {
transform-origin: center right;
background: #efefef;
}
.scroll-content {
overflow: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}
.scrollable {
-webkit-backface-visibility: hidden;
}
}
#keyframes center-to-right {
0% {
transform: rotateY( 0deg ) scale3d( 1, 1, 1 );
}
// 15% {
// transform: rotateY( 0deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
// 75% {
// transform: rotateY( -90deg ) scale3d( 0.90, 0.90, 0.90 ) translateY( 50px );
// }
100% {
transform: rotateY( -90deg ) scale3d( 1, 1, 1 );
}
}
https://jsfiddle.net/fkb241ys/14/
This code works well on Mozilla Firefox, Google Chrome, and MS explorer. However, it doesn't work at all on mobile devices, particularly iOS. Please let me know what needs to be added or removed to make it function properly.
HTML
<div class="bg-grad">
<div class="clouds">
<div class="cloud x1"></div>
</div>
</div>
CSS
/* BG Gradients
~-----------------------------------------*/
.bg-grad {
background: #000;
background: transparent url("http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg") center bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bg-grad .bg-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 6;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.bg-grad .bg-layer.on {
opacity: 1;
}
/* Clouds
~-----------------------------------------*/
.cloud {
width: 100%;
height: 900px;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background: transparent url('http://freepngimages.com/wp-content/uploads/2014/11/ten-party-balloons.png') left bottom no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#media (max-width: 550px) {
.cloud {
display: none;
}
}
.x1 {
-moz-animation: moveclouds 40s linear infinite;
-webkit-animation: moveclouds 40s linear infinite;
animation: moveclouds 40s linear infinite;
width: 2036px;
height: 1608px;
}
#-webkit-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-moz-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
#-o-keyframes moveclouds {
0% {
margin-left: 100%;
}
100% {
margin-left: -1400px;
}
}
https://jsfiddle.net/r2uuvubg/2/