Hello i am using this code to flip my block on my website:
.tegels {
/*position:relative;*/
width:25.2%;
height:37.4%;
overflow:hidden;
float:left;
margin-top:3.5vw;
margin-bottom:0px;
margin-left:4.8%;
margin-right:2%;
list-style-type: none;
display:inline-block;
}
.tegels figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-3vw;
width:100%;
}
.tegels figure img {
display:block;
position:relative;
z-index:10;
margin-left:3vw;
width:100%;
height:100%;
}
.tegels figure figcaption {
display:block;
position:absolute;
z-index:5;
margin-left:3vw;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
}
.tegels figure h2 {
font-family:Garamond, Georgia, serif;
color:black;
font-size:2.1vw;
text-align:center;
margin-bottom:1vw;
}
.tegels figure p {
display:block;
font-family:Garamond, Georgia, serif;
font-size:1.5vw;
line-height:1.7vw;
margin:0;
color:#fff;
text-align:center;
}
.tegels figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:2vw 1vw;
background-color:rgba(204,204,204, 0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-ms-transform:all .01s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure:hover img,figure.hover img {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg)
}
.tegels figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
I searched for 3 hours for a solution but i couldn't find it. So that's why i am asking it on the best website forum of all time. Haha, thanks for your time to read this for me. My website is online at www.gester.nl. I looked for codes to target the internet explorer but it did'nt work with my version so i don't know where the problem is in my code.
Looks pretty much a bug in IE11 with windows 10 with backface-visibility and WebGL.
I have tested it in:
IE10 with Windows 8
IE10 with Windows 7
IE11 with Windows 8.1
IE11 with Windows 7
All they work properly
Please see the known issues from caniuse.
I haven't found a solution yet but you know what's the error about.
Related
I'm working on a website and I've just noticed that the body doesn't seem to accept overflow:hidden on the Google Chrome app on my Samsung phone. I used to have an iPhone and I didn't experience this problem with the Chrome iOS app, but I've noticed that this code is sketchy at best – I also had a difficult time getting it to work on Safari desktop browser. I've tried using a wrapper around my content and this hasn't made any difference.
What happens is that when the user opens the push menu using the button on the left of the header, the viewport seems to expand, so the header extends in order to fill it, making the logo and the other button slide to the right. You're then able to scroll right and zoom out further, making everything smaller and breaking my meta viewport tag, which I obviously want to avoid. I've tried using touch-action: pan-x; which stops the user scrolling right, but doesn't actually solve the issue of the viewport expanding and taking the header with it.
Adding overflow-x:hidden to the html tag solves this problem on mobile, but that in turn breaks the overflow:hidden I've added to the body and allows users to scroll up and down on the desktop version when the menu is open.
I've created a jsFiddle below, but I've been unable to recreate this problem. I've left the relevant code from my site below along with a link to a page in which the problem occurs. I've also left a link to another website with a structure that I've imitated on my own site. They seem to have been able to make it work, and yet I've copied the code they're using on their html and body but it behaves very differently on mine.
Could anybody tell me if I've missed something, or how they're managing to do this and I can't on mine?
My website – http://www.lucieaverillphotography.co.uk/product-category/prints/
Other website where this seems to work – https://www.etq-amsterdam.com/about/
jsFiddle
https://jsfiddle.net/75dtb1zk/40/
HTML
<header class="header">
<span id="button-one"></span>
<span id="button-two"></span>
<div class="overlay"></div>
</header>
<div class="push-menu-one"></div>
<div class="push-menu-two"></div>
<div class="content">
</div>
<footer class="footer">
</footer>
CSS
/* MAIN SITE STRUCTURE */
html {
position:relative;
height:100%;
background-color:pink;
}
body {
width:100%;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
display:flex;
flex-direction: column;
}
.header {
position:fixed;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:55px;
z-index:10;
background-color:#fff;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.content {
flex: 1;
width:85%;
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
.footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
padding: 10px 0 10px 0;
background-color: #efefef;
transition: all .6s cubic-bezier(.645,.045,.355,1);
}
/* PUSH MENUS */
#button-one {
display:inline-block;
width:30px;
height:30px;
margin:20px;
background-color:green;
cursor:pointer;
}
#button-two {
display:inline-block;
float:right;
width:30px;
height:30px;
margin:20px;
background-color:orange;
cursor:pointer;
}
.push-menu-one {
position:fixed;
top:0px;
left:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(-295px,0px,0px)
}
.push-menu-two {
position:fixed;
top:0px;
right:0;
width:295px;
height:100%;
margin:0;
padding:0;
background-color:purple;
transition: all .6s cubic-bezier(.645,.045,.355,1);
transform:translate3d(295px,0px,0px)
}
.overlay {
position:fixed;
z-index:9;
top:0px;
left:0px;
width:100%;
height:100%;
pointer-events:none;
background-color:#000000;
opacity:0;
transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
/* TOGGLE CLASSES */
body.open-left,
body.open-right {
overflow:hidden;
}
body.open-left .header,
body.open-left .content,
body.open-left .footer {
transform:translate3d(295px,0px,0px)
}
body.open-right .header,
body.open-right .content,
body.open-right .footer {
transform:translate3d(-295px,0px,0px)
}
body.open-left .overlay,
body.open-right .overlay {
width:100%;
height:100%;
opacity:0.4;
pointer-events:auto;
}
body.open-left .push-menu-one {
transform:translate3d(0px,0px,0px)
}
body.open-right .push-menu-two {
transform:translate3d(0px,0px,0px)
}
jQuery
jQuery(document).ready(function($) {
$('#button-one').click(function() {
$('body').toggleClass('open-left');
});
$('#button-two').click(function() {
$('body').toggleClass('open-right');
});
$('.overlay').click(function() {
$('body').removeClass('open-left');
$('body').removeClass('open-right');
});
});
I have a simple menu that I built and that I'm trying add animations to. I added a slide on hover animation but when you hover over the item the slide animation goes over the text blocking it. I'm pretty sure its going to be an easy fix that I'm over looking but help would be appreciated. The issue is coming from these CSS classes I'm pretty sure:
.nav2Active{
font-size:16px;
font-weight:bold;
padding-top:10px;
padding-bottom:10px;
width:100px;
border-left:thin solid transparent;
background:transparent;
}
.nav2Active::before{
content:'';
background:red;
position:absolute;
height:30px;
width:0%;
-webkit-transition:width .3s ease-out;
-moz-transition:width .3s ease-out;
-ms-transition:width .3s ease-out;
z-index:0;
}
.nav2Active a{
color:#000;
text-decoration:none;
padding-left:10px;
}
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
}
.nav2Active:active{
background: #CCC;
border-left: #F60;
}
http://jsfiddle.net/pwfv33hs/
Hay its very easy do this :
.nav2Active:hover::before{
border-left:thin solid #F60;
width:100px;
z-index:-1
}
It's a z-index issue, you set a value for the pseudo element = 0.
.nav2Active::before{
z-index:0;
}
But all elements has the same value as default. In order to work you can set a -1 value. But I don't like to work with that negative values. I suggest this:
.nav2Active a{
position:relative;
z-index:1;
}
Check the UpdatedFiddle
HI my problem is why in Safari on Win margin-right is working but on Mac not? Its a bug or i have anything bad? Is any alternative how to resolve it?
my not working css
{
top:auto;
bottom:0px;
z-index:100;
margin:0 0 0 48%;
background-color:#fff;
background-image:url("../img/arr_up_blue.png");
-webkit-transition: .7s;
transition: .7s;
height:0;
border:0;
}
I'm working on a transition onmouse hover an div. The effect should be a text merging from the top to the middle of the div while the div turns from square to circle. The problem is that if in FireFox the square to circle effect works but not the text droping down from top, this effect only works on Chrome and IE. Does anyone encounter this before and can someone tell me why this is happening?
The code of my buttons are below:
#navigation{
font-size:14px;
float:left;
left:0;
height:100%;
position:static;
width:65px;
margin-top:6.5%;
margin-left:10%;
}
#tab1{
float:left;
width:65px;
height:65px;
left:0;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
margin-top:40px;
box-shadow: 1px 1px 2px #000;
}
.tab1h{
width:65px;
height:65px;
visibility:none;
position: absolute;
opacity: 0;
vertical-align: middle;
text-align:center;
transition:all 1s, all 1.1s;
-webkit-transition:all 1s, all 1.1s;
-moz-transition:all 1s, all 1.1s;
}
#tab1:hover {
border-radius:50%;
overflow:hidden;
visibility:none;
}
#tab1:hover > .tab1h {
visibility:visible;
float:left;
opacity:1;
padding-top:20px;
}
<div id="navigationi">
<a href="index.html" >
<div id="tab1" style="background-color:#f5f4f0; font-size:14px;">
<div class="tab1h">
Home
</div>
</div>
</a>
</div>
So here is my html and css also here is a JSFiddle http://jsfiddle.net/MFcS5/.
Thanks,Victor
Removing overflow:hidden from #tab1:hover solves the problem. Here's a fiddle showing it working as intended in Firefox (as well as Chrome and IE).
It could be caused by this bug: "CSS transitions don't start due to frame reconstruction of ancestor or self..."; changing the overflow causes #tab1 to be redrawn at the same time as the transition is supposed to start, so its child .tab1h doesn't get to transition.
Background
I'm customising a tumblr theme (Source: hasaportfolio), and I am trying to change the size of one particular element.
This element, on :hover, is meant to transition opacity - "fade in". What is happening, however, is that once I change the pixel sizes the transitions refuse to work, and the newly appearing content does not appear at all.
HTML Code
The HTML code this is being applied to is as follows. I've commented it as well as I can.
<div class="post video featured"> <!-- wrapper, no css attached -->
<div class="box-featured">
<iframe src="http://player.vimeo.com/video/30284533" width="750" height="430" frameborder="0"></iframe>
<div class="box-caption-text-featured"> <!-- this div and content is "hidden" (0% opacity) until :hover -->
<h1>Paint</h1>
<p>I hate yogurt. It's just stuff with bits in.</p>
<p>You know how I sometimes have really brilliant ideas? You've swallowed a planet!</p>
</div><!-- box-caption-text-featured -->
# <!-- this a is the "trigger" for the transition. Normally it would link to the post permalink -->
</div><!-- box-featured -->
</div><!-- post -->
I also have another copy of this code, the only difference is that it is without the -featured at the end of each class definition. This is so I can see if the code works at its 'original' size (which it does).
CSS Code
The original code for running these boxes follows:
.box { float:left; width:250px; height:130px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption, { width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:transparent; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text { color:#fff; width:220px; height:130px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
My changed code is as follows. The only things I have changed are the width and height pixel values.
.box-featured { float:left; width:750px; height:430px; overflow:hidden; margin:5px; position:relative; background-color:#F7F5F5; vertical-align:middle; padding:-5px 0 0 0; }
.box-caption-featured { width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:99; background-color:#f00; filter:alpha(opacity-0); opacity:0; display:inline-block; padding:0px 15px; text-indent:-2000px; }
.box-caption-text-featured { color:#fff; width:750px; height:430px; overflow:hidden; position:absolute; left:0px; top:0px; z-index:95; font-size:12px; line-height:16px; background-color:transparent; filter:alpha(opacity=0); padding:0px 15px; opacity:0; display:inline-block; -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -o-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.box:hover .box-caption-featured { display:inline-block; background-color:transparent; }
.box:hover .box-caption-text-featured { opacity:.85; filter:alpha(opacity=85); background-color:#ff9711; }
Have I just missed something dumb, or is there an issue in this code that prevents what I'm trying to do?
Example Page
There's an example of what I'm taking about over here.
What i'm thinking at this point is that you need to change it to:
.box-featured:hover