I add some videos to my website and when I tested on Chrome it's working correctly, but when I tested on safari and Firefox it shakes. What is the problem?
This is my CSS code:
.parallax-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
When I read about this problem I think the problem in this part
transform: translate(-50%,-50%);
But I don't know how I can fix it.
Try this code
.parallax-background video {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
Related
I try to setup the position of diffrent images on a site. I use the Avada Theme to create a basic column layout (3 colums, 2 rows) and css to make more specific configurations on it. My divs, which are containing the img's have IDs I use.
#note_col1_row1{
position: relative;
z-index: 1001;
top: 5%;
left: 3%;
-webkit-transform: rotate(-2deg) scale(1.3);
transform: rotate(-2deg) scale(1.3);
}
#note_col2_row1{
position: relative;
z-index: 1001;
bottom: 4%;
left: 4%;
-webkit-transform: rotate(4deg) scale(1);
transform: rotate(4deg) scale(1);
}
#note_col1_row2{
position: relative;
z-index: 1001;
left: 2%;
bottom: 22%;
-webkit-transform: rotate(2deg) scale(1.2);
transform: rotate(2deg) scale(1.2);
}
#note_col3_row1{
position: relative;
z-index: 1000;
top: 4%;
left: 5%;
width: 170px !important;
-webkit-transform: rotate(-2deg) scale(1.2);
transform: rotate(-2deg) scale(1.2);
}
#note_col2_row2{
position: relative;
z-index: 1000;
top: 5%;
left: 5%;
-webkit-transform: rotate(-4deg) scale(1.3);
transform: rotate(-4deg) scale(1.3);
}
#note_col3_row2{
position: relative;
z-index: 1000;
bottom: 15%;
-webkit-transform: rotate(2deg) scale(0.8);
transform: rotate(2deg) scale(0.8);
}
So now my problem is, if I load the page the bottom,top... positions don't apply to the divs. This only happens if I start the debug view via F12 and change a value to any other (for example "bottom: 22%;" to "bottom: 21%;").
Is there any reason why this behaves like this and any possibilty to solve the problem?
Try setting position to absolute rather than relative like this:
#note_col1_row1
{
position: absolute;
...
}
I have been working at this for like 3 hours and everything I try in Google Chrome doesn't fix it, nor sizing the images to massive width/height.
Basically, I would like to get rid of that whitespace around the 3 images under "featured products." I want all the images to span those widths (big one is like 66.66 and the two smaller ones are 33.33%). No amount of resizing the images or changing the code is working, so I must be missing something.
The password to get in is "fusrodraw"
http://shop.thewiredlife.net/
Any help would greatly be appreciated!
.grid-product__image {
position: absolute;
top: 50%;
left: 50%;
display: block;
margin: 0;
height: 100%;
width: 100%;
padding: 0px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
Take the max-width and max-height out of the equation
The pseudo :before works on Firefox, Safari but not in Chrome.
Its a square box rotated to form a diamond shape. But, using :before the bg is again rotated backwards and given a position fixed. It gives a really nice effect !
Check My Site :
www.wangeltmg.com
When you scroll at first, the background overlaps and creates blurry image to get cleared.. !
All i did is
#element3
{
width: 1000px;
height:1000px;
line-height: 5em;
margin: 0px auto;
border: 0px solid #666;
border-radius: 3px;
margin-top:150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
overflow: hidden;
left:0; right:0;
top:10%;
}
#element3:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -10%;
z-index: 0;
background: url(../img/custom11.jpg) 0 0 no-repeat fixed;
background-size:135% 135%;
background-position:140px -315px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Is there anything to work on regarding the compatibility with Chorme ?
I would love to have your answers fellas.
Thanks.
Your CSS background is behaving bizarre on chrome because you needed to add:
-webkit-transform CSS 3 transform with prefix for Chrome.
.parallax-two #element3 {
border: 0 solid #666666;
border-radius: 3px;
height: 1000px;
left: 0;
line-height: 5em;
margin: 150px auto 0;
overflow: hidden;
position: absolute;
right: 0;
top: 10%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 1000px;
}
http://fiddle.jshell.net/mmvdz/6
http://fiddle.jshell.net/mmvdz/6/show/
For Firefox, Chrome, Opera, IE etc. it is preferred to add the vendor prefix CSS3 versions as well. It is needed for older versions of Firefox as well for example.
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
If you use editor like Sublime Text to code manually. You have plugins which add this vendor prefix automatically.
http://www.hongkiat.com/blog/css-automatic-vendor-prefix/
I do see that you have another problem on Chrome. The fixed div has issues with z-index. And it seems it has to do with CSS 3 transform properties for webkit which makes the triangle appear above the fixed div but without the blur effect in Chrome.
#home-wrap {
-webkit-backface-visibility: hidden;
}
In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.
I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php
I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.
Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.
If it helps, here are the CSS rules for sidetag.
color: #FFF;
height: 50px;
width: 200px;
position: fixed;
background-color: rgb(0,102,204);
font-size: 32px;
line-height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
top: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
Greatful if anyone could help. Cheers.
Use transform-origin:
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
Take a look at -webkit-transform-origin. As your element is fixed, you may need to amend the transform origin accordingly.
You can use transform-orign:
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
try this link