I have a couple of divs, one inside the other, I'm using border-radius and overflow: hidden on the outer div which creates a circular mask over the inner div.
It works, however, when using backface-visibility: hidden; on the child div the border-radius is no longer applied.
Here's an example of the issue, can be seen in chrome and safari
Looks like this is a bug in webkit it's being tracked on the chromium issue track. Looks like no sign of a fix being merged any time soon.
Ok, i've tried a few things with your example. The W3schools states that "backface-visibility:hidden;" is not yet well supported. This property has to do with 3d transformations, right? Specially rotation.
I found a workaround. Apply the "backface-visibility" on the mask div, not the inner one. If you do that, you'll see that it breaks the round as well. But if you apply a rotation transform on the mask div, the rounded border appears back to normal.
So, if you really want to hide the backface without losing the radius, apply this style only after you started rotating the element. Check this out:
<p>Backface hidden:</p>
<div class="ex">
<div class="mask bfh">
<div class="bg"></div>
</div>
</div>
And the css:
.bfh {
-webkit-backface-visibility:hidden;
-webkit-transform: rotateY(30deg);
}
In #Rob linked track on chrome issue there is also a workaround that was added by user viktorli.
Simply add a transform rule on the parent element of the rogue child not respecting the overflow:hidden rule and it will be fixed! something like:
-webkit-transform: scale(1);
Related
I want a cool scrolling effect on my website like this:
There are two background images that scroll much slower than the rest of the page, divided by another element with a higher z-index value and unmodified scroll speed.
I have managed to do so in Firefox using 3d transform and overflow: hidden (as you can see, the two background images do not overlap). Here's the significant part of the code:
HTML:
<div class="container-container">
<div class="container">
<div class="slow-scroll">
<img src="...">
</div>
</div>
</div>
CSS:
.container-container {
perspective: 100px;
}
.container {
transform-style: preserve-3d;
overflow: hidden;
}
.slow-scroll {
transform: translateZ(-900px) scale(10.5);
}
My intention was to do the same as in the GIF - have a container with regular scroll speed that would contain the slower scrolling background, so that the overflow could be hidden, thus making it impossible for the two background images to overlap.
However, this doesn't work for Chrome or Microsoft Edge - the background images act as if the translateZ() value was absent (the scale still works normally though). This happens if I set overflow: hidden to any value except initial, revert, or unset.
Can this be fixed? Is there a workaround?
Note: I have looked around and saw this question, but it's outdated and the accepted answer does not work for me.
Based on your description, and the sample images provided, I think what you're looking for is a parallax scrolling effect. Simply refer to this tutorial below, which contains a simple example. I think it will help you.
How TO - Parallax Scrolling
Edit:
And according to your description, you mentioned that translateZ() not work in Edge, I created a simple demo and tested it, and I found it works normally in Edge(version 97.0.1072.55). I think maybe there is some problem with the code, such as this line:
transform: transform: translateZ(-900px) scale(10.5);
And if you want to implement this requirement, you could try to create multiple layers and set different translateZ() values for them. Simply refer to this example: Pure CSS Parallax Websites - Demo3
I have a <div> which contains a bunch of <p>s and would like to have an opaque background image behind text, scaled to fill the entire <div>. I.e. no matter how much text I add or remove, the image should grow or shrink to cover the entire background of the <div>.
And only the image should have opacity. Text within the div should be solid black.
How do I do that, please? (and do I have to worry about browsers which do not support CSS3?)
[Answer] from o.p.
I stepped back and looked at the problem another way and found an answer which is cross-browser and does not need CSS3.
I fired up The Gimp and added opactiy into the image itself! Exactly what I sought to do, with no fancy CSS3 necessary ;-)
Thanks very much for your help, #JSW189. I hope you don't mind me posting in your answer, but this is the solution which I chose.
You want to use the background-image property to add the image, then background-size:100% to have the background image fill the entire div.
div {
background-image:url('image_url_goes_here.jpg');
background-size: 100%;
}
JS Fiddle Example.
Further, if you would like to toggle with the opacity, you can use the opacity property. It is set to opacity:1 (opaque) by default, but you can change that by toggling the opacity between 1 and 0. So, for example, if you want an opacity of 50%, you would use opacity:.5.
Opacity JS Fiddle Example.
Note that background-size is a CSS3 property. You can see a browser compatibility chart here. However, this problem can be solved by libraries like modernizr.
iOS 5 released web designers a new property -webkit-overflow-scrolling:touch that uses the iOS devices hardware accelerator to provide native scrolling for a scrollable div.
When implemented on our site in development it does work but not well. I believe there may be a CSS issue hence I ask here.
The following fiddle will show you it working perfectly
If you pop over to our site in development you will find the same panel under facilities tab but on iOS although the scrolling is perfect the overflowed section is not shown with pictures literarily chopped in two.
http://www.golfbrowser.com/courses/mill-ride/
I have no idea how to fix this
http://www.golfbrowser.com/photo.PNG
As #relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px) works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.
So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
What a bugger they let loose here. Tried all manner of workarounds until I finally found the only property needed by for elements to be properly rendered in a -webkit-overflow-scrolling:touch div: position: static
Relative and absolute positioned elements are always cut off on the boundary, and completely missing (except for empty space) outside of it. If you change the position property dynamically, from static to absolute, only the visible portion of the scrollable div viewport stays rendered, wherever the offset happens to be.
I have run into this bug as well. I fixed it by applying the following css to parent elements:
-webkit-transform: translate3d(0, 0, 0);
However, I have noticed that that slows down rendering and might select other input elements than wanted when a touched input element is scrolled into the center of the view (by Safari/iOS).
In iOS, when an element inside an element with -webkit-overflow-scrolling: touch set is positioned absolutely (or fixed) relative to an element outside of the scrolling container, the element is rendered only once and the rendering is not updated as the element is scrolled. Sample HTML:
<div class="relative-to-me">
<div class="scrollable">
<div class="absolutely-positioned">
</div>
</div>
</div>
If you force a re-render by changing a CSS property (in the inspector for example), you can see that the element's positioning is re-rendered into the correct location. I suspect this is a result of some performance features to optimize scrolling performance.
The solution to this problem is to set will-change: transform on the absolutely (or fixed) positioned element.
.absolutely-positioned {
will-change: transform;
}
I deeply investigated this bug, I also created a jsfiddle and submitted it to Apple in a bug report. Please see: iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch
As soon as Apple replies to me, I'll report it on that topic so you can stay up-to-date about this very annoying bug
I also experienced the problem where overflow scroll with -webkit-overlfow-scrolling set to touch resulted in redraw problems with positioned elements. In my case I had a list where the individual items had relative positioning so that I could use positioning on their child elements. With the above CSS on iOS 5, when the user scrolled hidden content into view, there was a momentary delay before it redrew the screen to review the elements. It was really annoying. Fortunately I discover that if I gave the parent node position relative as well, this was resolved.
The bug still lives in iOS 6. If your issue is related to position: relative, you might solve the issue be setting z-index: 1 temporarily via JS. -webkit-transform: translate(...) did not work with position: relative in my case.
I tried some different solutions, seemed not work perfectly in my case.
Finally I've found a way works fine with jQuery:
Apply -webkit-overflow-scrolling property every time when you touch up.
*At first I Applied Also -webkit-overflow-scrolling:auto when TouchDown, to disable iOS rendering. But it made Page blink. So I dropped it away, then works fine surprisingly!
Check lines below, hope it helps:
<!-- 🍉 JQuery Functions-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//🍋 Apply -webkit-overflow-scrolling in Every TouchEnd
$(document).on('click touchend', function(event) {
$("#TestDIV").css({"-webkit-overflow-scrolling":"touch"});
});
</script>
<!-- 🍉 html Elements & Style -->
<div id="TestDIV">
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
<div class="Element"></div>
</div>
<style>
#TestDIV{
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
#TestDIV .Element{
width:300px;
height:300px;
margin: 2px;
background-color: gray;
display: inline-block;
}
#TestDIV .Element:nth-child(odd){
background-color: whitesmoke;
}
</style>
I am facing an issue with Z-index property of CSS in IE 6.0
HTML
<div id="banner"></div>
CSS
#banner{
background:url(pix/banner.PNG) top no-repeat;
z-index = -1;
}
URL: http://www.whizlabs.com/examprep/
In IE 6.0, it shows a line on the forehead of girl, showing in the banner on the top of the page. In other browsers, line is not coming. How can i resolve this issue ?
Please help me.
Thanks
Devesh M
There is really no reason to break the girl up into separate images.
Just use a single image and then position it relative to the top right of your wrapper
#banner{
background:url(pix/girl.PNG) top no-repeat; /* where girl is the whole girl */
position:relative;
top:0;
right:150px;
}
Then make sure that the is just under your header div
Z-index has no effect on statically positioned elements, therefore you would need to set the css position property to something else, like relative, but I don't think that you should use z-index in this case.
For a quick fix though you can try something like this:
* html #banner { margin-top: -1px; }
This above trick only applies to MSIE6.
Try puting the markup of the line before the markup of the girl, and place both using css. It usually worked for me in similar cases.
Also with Z-Index make sure to use numbers starting at 1.
If you are having trouble with an element, try giving it a Position property as well as give its parent a Position and a Z-Index.
z-index only works on positioned elements.
Plus, you can only swap the depths of elements that are all contained by the same element - nested elements (one inside the other) cannot jump out of their nesting!
Look here (http://www.makeofficebetter.com/comments.htm) for a link to an example of my problem.
If you look at that link you'll see that I have a IMG floated left, and a DIV overlaying it. within that div I have 2 more divs. Both should overlay the IMG, but for some reason only the first DIV overlays correctly...and the 2nd does not. It refuses to overlay my IMG. Both are children of a DIV that is overlaying the IMG.
This seems to be only a problem in IE8 Compatibility Mode...so I guess that means it also looks bad in IE7. You can toggle Compatibilty mode off and on to see the problem and I've added color to my DIV backgrounds so you can see the issue better.
Safari and Firefox work fine.
Use DRY concepts with your CSS, this might help weed out the problem.
For example instead of having two classes .comment and .mod-comment (both with identical subclasses), only use .comment and when a moderator posts, add a second .mod class.
Example:
current
<div class="comment">...</div>
<div class="mod-comment">...</div>
DRY
<div class="comment">...</div>
<div class="comment mod">...</div>
This way, you can style comment, and stick the differences for mod comment in .mod
The problem is that the avatar is taking up space that the bubble wants. IE7 won't let them overlap. I tried adding this CSS - as far as I can tell that will solve it for IE7 without breaking in Firefox. I suggest more testing or making this CSS conditional for IE7 only.
.comment .avatar {
margin-right: -22px;
}
.mod-comment .avatar {
margin-left: -22px;
}
Hope this helps!