We have particles.js loaded and cannot use the scrollbar on wordpress website. We need this to work with full height and full width. Please see html code below in link.
Our html code" : website link: http://www.tcnarch.co.za/about
We have tried disabling plugins and checked dev tools for errors and there are none. Have also tried overflow-x: auto and also removed the height: 100% atribute from css but to no avail. Please help we have tried everything to our knowledge. Thank you
#particles-js {
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
top: 0;
left: 0;
right: 0;
width: 100%;
}
#particles-js canvas {
display: block;
vertical-align: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
transition: opacity .8s ease, transform 1.4s ease
}
Problem has been resolved. Fixed this by adding right: 10px suppose it's not the ideal solution but the scrollbar now works also what might help others in future is setting pointer events to all.
Related
I created a menu that slides in on hover.
When i move the mouse away from the menu it doesn't return to the pre hover state even though I've specified the container width and height so anywhere the mouse moves outside that it should return.
#menucontrol {
width:500px;
height: 800px;
}
#menucontrol:hover #navdiv {
left: 23px;
transition: all .3s ease-in-out;
opacity: 1.0;
}
#menucontrol:hover #dashes {
transform: rotate(360deg);
transition: all .3s ease-in-out;
opacity: 0;
}
#navdiv {
position: absolute;
top: 68px;
left:-55px;
z-index:999999;
opacity: 0;
width: 555px;
transition: all .3s ease-in-out;
}
The reason this is happening is that your #menucontrol div is taking up the entire page except for the area of your logo. I would suggest trying the :hover psuedo element on your #dashes id. I also noticed your z-indexes are set on some elements and not others. I think this could also be causing you some issues. Without seeing your html it is hard to duplicate and make changes to help you solve this issue.
What I have is an offcanvas nav that moves the entire page once opened.
It looks like this:
.offcanvas {
position: fixed;
padding-left: calc($unit * 8);
z-index: 3;
height: 100%;
width: 420px;
top: 0;
right: 0;
background: $color-secondary;
overflow-x: hidden;
transform: translateX(420px);
will-change: transform;
transition: transform .2s ease-in-out;
}
When a button is clicked it gets a class modifier through jquery which moves it inside the window:
&--opened {
will-change: transform;
transform: translateX(0);
}
Content is wrapped in main which also gets moved once the nav is opened:
.main {
will-change: transform;
transition: transform .2s ease-in-out;
&__moved {
will-change: transform;
transform: translateX(-420px);
}
}
It works just fine in every major browser except Firefox (54.0.1), tested on Windows and OSX. The transition is extremely laggy both when opening and closing the menu. I tried adding will-change: transform; but the issue is still there. I've tried using translate3d and left/right, but those didn't help.
Has anyone experienced these issues and what have you done to solve them?
Thanks!
I am trying to replicate the zoom #1 hover effect from this codepen.
In this codepen demo, the image zoom-in but the container stays the same size.
Here the css for the image
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
The image container also has this code
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
When I'm using it on my page, my image get scaled.
You can see it on this page (password : test )
I'm thinking it probably has to do with the overflow:hidden from the container image, but I'm using a template and using firefox inspectors, it seem like the image div container would be #le_body_row_2_col_1_el_1.element-container.cf.condition_small
I have added an overflow:hidden to this div but still no luck.
So I'm clueless right now. I don't have much experience with css/html template customization. Either it's not the overflow properties that i'm missing or i'm not using it on the right div.
If anyone could help that'd be greatly appreciated. Many thanks.
i have made demo i hope it will help
http://codepen.io/anon/pen/MKyRrM
.hover01 figure img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
figure {
width: 500px;
height: 450px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it.
Most important CSS definition and part of HTML code:
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
</figure>
Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/
I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/
I had a similar problem on my project. All images were position: absolute; and the transform look like that:
figure img{
transform: translate( -50%, 50%) scale(1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale(1.1);
}
I replace every scale with scale3d and that solved my problem.
The final styles look like that:
figure img{
transform: translate( -50%, 50%) scale3d(1, 1, 1);
position: absolute;
top: 50%;
left: 50%;
}
figure img:hover{
transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}
Hope that's will fix your problem
On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side
.projects_holder.hover_text.no_space article .image img {
margin: 0 1px;
}
If you disable that style, you'll see the image move as you're describing when hovering on the image.
Therefore, your CSS for the image should be:
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
display: block; /* (or inline-block) */
margin: 0 1px;
}
I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.
Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.
I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!
7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
will-change: transform;
}
I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.
So I think the solution is to use an image with a 1 x 1 ration factor.
So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.
Let me know if that solves the issue?!
figure {
display: block;
overflow: hidden;
position: relative;
backface-visibility: hidden;
}
figure img {
width: 100%;
transform: scale(1);
transition: transform 0.3s ease-in-out;
}
figure:hover img {
transform: scale(1.1);
}
<figure>
<img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
</figure>
I am showing a modal popup using CSS3 transitions (largely borrowed from Effeckt.css). It works well in all modern browsers except Safari. In Safari, the movement is OK, but the background-color snaps in unevenly.
This is the code, the problem is visible in Safari on OSX: http://jsfiddle.net/eJsZx/4/
A screenshot of the problem before it resolves itself. You can see that half the div is correctly colored white, half is still transparent.
This is the relevant part of the CSS (.effeckt-show and .md-effect-8 are applied when the button is clicked, to show the modal):
.effeckt-modal {
visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: white;
}
.md-effect-8 {
-webkit-perspective: 1300px;
-ms-perspective: 1300px;
-o-perspective: 1300px;
perspective: 1300px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(-70deg);
-ms-transform: rotateY(-70deg);
-o-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
As far as I can tell it's a bug, yes, Safari is rendering intersection where it shouldn't.
For some time I thought Safari is doing it right by always rendering intersection of elements, but as far as I understand the specs, only elements in the same 3d rendering context should intersect, and that would be children of elements with a transform-style of preserve-3d.
So far the only workaround I found (only tested on Windows yet where Safari shows the same behaviour) is to translate the underlying elements away on the z-axis. Without perspective being applied it won't actually translate, but Safari/Webkit seems to think it does (which probably is because it mistakenly treats the element as if it were in the same 3d rendering context as the actually transformed dialog) and so the elements do no longer intersect.
.effeckt-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: 500ms;
-o-transition: 500ms;
transition: 500ms;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
-webkit-transform: translateZ(-1000px);
}
http://jsfiddle.net/eJsZx/5/
I found this issue when trying to find a solution to a problem I was experiencing in Safari (Mac and iOS), where a y-rotated svg only displayed its right half for no apparent reason.
In my case, the svg was a child of a fixed-position div, and I found that both position: fixed and position: absolute on the parent caused half the svg to disappear.
Neither changing z indexes, perspective, nor translate-z seemed to solve the issue. But randomly, adding a new div around my svg and setting its background-color solved the problem. I hope this helps the next person :)
In my case, adding z-index: 0 to the parent element fixed it as per Thomas's suggestion.
None of the solutions above worked for me. In the end, this is a bug with rotate on Safari that Chrome previously had but fixed. The answer here was what solved it for me - using scale() rather than rotate().
In my case, it worked to put transform: translateZ(0); on the parent container. The object itself is an image.