I'm trying to set up parallax using CSS perspective and translateZ, but getting some weird overflow errors in Firefox.
http://jsbin.com/fiviyefeme/1/edit?html,css,js,output
As you can see, when moving the mouse around, the background-image gets cropped. But I really can't see why they would do that. I've also tried using preserve-3d, but that only makes them dissapear.
Can only see a white background in the link that you provided. I have also checked the css and it doesn't have any background image on it:
body {
perspective: 800px;
}
Have you updated this?
Related
I built header and section hero in wordpress. I used clean code and i have an overflow on mobile. Always in devtools and sometimes on my mobile phone. Its so difficult to find it beacuse when you edit or delete any element in devtools, overflow gone.
https://fisite.pl/page/
Screenshot:
see devtools screenshot
Sometimes Chrome DevTools can be a bit buggy. I'd suggest trying to reproduce the problem in Firefox DevTools first of all.
There can be many reasons as to why something is overflowing - check for elements with a fixed width-size, position: absolute and other CSS-properties that could cause overflow.
One solution is to give all elements a border in CSS - that way you have the option to visually see if there's any overflowing content.
* {
border:1px solid red !important;
}
If you have a relatively small page, you can use Chrome DevTools to delete elements separately. Keep doing this on elements you suspect might cause the overflow until your site doesn't have overflow anymore. Then you'll know what element is causing the overflow:
Hope this helps!
You can add the below classes in the style sheet.
.ct-section, .ct-inner-content{
overflow:hidden;
}
As well as the above answers, another thing to check is the styling rules on pseudo elements like ::before. (width, padding, margins)
Issues for pseudo elements can be hard to spot in the developer tools using above techniques.
Another fix is:
#media only screen and (max-width: 768px){
html,
body{
width:100%;
overflow-x:hidden;
}
}
(from discussion at: https://wordpress.org/support/topic/overflow-issue/)
I have a hover effect that when it is triggered, the box enlarges. Only issue i have is that the text seems to blur during the transition and then goes sharp again when 'transformed'.
Before posting on here i decided to have a research and came across this post which seems to be the issue with mine as well:
How to force re-render after a WebKit 3D transform in Safari
http://duopixel.com/stack/scale.html
I have applied their answer to my build and still the blurred effect happens. I have provided a link below and if anyone could advise me with what i have is possible to resolve that would be great!
eg of transition code:
-moz-transform:scale(1.05,1.05);
http://jsfiddle.net/VcVpM/1/
While it's not equivalent, setting the width, height, left, top, font-size attributes in the :hover works without the blurring on Chrome.
.cta:hover {
width: 500px;
height: 500px;
font-size: 400%;
}
The only other work-around "might" be to use animation #keyframes and set a decent amount of them ~5 or 10, it might force a correction of the blurring between each keyframe.
I found this on CSStricks.com:
It appears if you set your transforms to also use
translate3d( 0, 0, 0)
it can fix it, but it does cause fonts to be a bit blurry on rotate/transform. See here: http://codepen.io/WillsonSmith/pen/4/2
I use Jquery and needed my slider's H3 tags to be fixed. Larger text wasn't blurry for me.
I wrote the line
$("#slider1_container").find("h3").css("-webkit-transform", "translate3d(0,0,0)").css("-webkit-text-stroke", "0.15px");
and that fixed it best for me. I needed the -webkit- in front of my transform. I don't know why, as others said not to use it. I uploaded an image of the way it looked with some different settings.
Im working with a cross-browser compatibility, fixed everything fixable for IE7 and IE8. But it seems there is a slight (huge) problem with the background which is called by CMS.
As far as it seems, there is no problem in IE7 v8.0 BUT in IE7 v7.0 looks moved to the side in most pages, but not in others.
I figured it was because of a fix i did for some lost positions, but when i searched for a lost object in the right there was none.
And i have no idea how to make this bg to look right.
Please help me! im going crazy with this!
Page:
http://www.tvazteca.com/homes/laislaelreality
I think the problem its the background position. I cant make it work for the IE7.
<body class="fondo-pagina" data-twttr-rendered="true">
<style type="text/css">
.fondo-pagina {background:url(http://static.tvazteca.com/imagenes/2012/29/1634805.jpg) no-repeat; background-position: 50% 40px;background-color:#0b4a51;
*background-position: 50% 0 !important;
}
.bgBottom{background:url() bottom center no-repeat;}
</style>
The style up there is added automatically by the CMS. Although i have the same class in the style sheet:
.fondo-pagina{
background: url(../img/fondoislaEtapa1.jpg) top center no-repeat;background-color: #0b4a51;
*overflow-x:hidden;background-position: 50% 0px!important;
*background-position: 50% 0px!important; }
I havent been able to make it work. I know im using hacks, and its not the best option, but i was asked to only use one style sheet for the site, so another one for IE7-IE8 was out of the question.
How can i make IE7 to read the background position? Is it going crazy because of the double clases?
Using Chrome and FF, element inspectors i found out none of the background position clases were taken for IE.
TY for reading :)
I found the problem.
Nothing was wrong with the Html php and my Css
The problem comes from FACEBOOK:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
The scrip has to be placed in the div that contains the likes/comments etc. Other way it will go crazy in IE.
It opens up a big div that forces the page to be contained and makes horizontal scrollbar to be extended. As result, the background will take such width as the base one and position itself on the 50% 0px of that thing.
It only affects IE versions. The other browsers work fine.
In iPad an iframe doesn't display the shadow properly if its position is fixed.
position: fixed http://jsfiddle.net/akRsC/
position: static http://jsfiddle.net/akRsC/1/
Anyone knows how to fix this aside from removing position:fixed?
EDIT:
For some reason, the shadow is displayed when viewing the example inside jsfiddle but not in jsfiddle '/show' which is why this was my original link. I don't know why and I don't know how to make the css rules that make it work inside jsfiddle.
Did you try:
-webkit-appearance: none;
? Was useful to me for a lot of weird CSS stuff (but nothing to do with box-shadow).
And also, take a look at: http://cubiq.org/webkit-weird-box-shadow-bug-with-fix
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.