I need mix-blend-mode element in my project, so I use mix-blend-mode property.
It looked fine at first, but as the screen narrowed, it changed to an unexpected appearance.
Also overflow: hidden doesn't work, so blue comes out of the corner.
I run this code in Chrome browser.
Looks different depending on screen width
.card{
position: relative;
width: 300px;
height: 50vh;
background-color: pink;
margin: auto;
overflow: hidden;
border-radius: 24px;
}
.blend{
width: 100%;
height: 100%;
background-color: blue;
mix-blend-mode: color-dodge;
will-change: transform;
}
<div class="card">
<div class="blend"></div>
</div>
Here's my code.
Please let me know why this problem happen.
Thank you!
I think border-radius, overflow, mix-blend-mode and will-change properties seems to be contributing to this problem, but still I don't know ★why★ this happens.
Related
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
I have a problem with my parallax scrolling website. I need to create a fixed header at the top of the site, but it wont remain "fixed".
Link to full code here:
http://jsfiddle.net/ressy0101/sx4ukc1c/5/
#header{
position: fixed;
background-color: black;
height: 50px;
width: 100%;
z-index: 9999;
color:white;
text-align:center;
font-size:40px;
}
This is working for me, hope it will resolve your issue.
change position:sticky;
& add
top:0px;
i.e
#header{
top:0px;
position:sticky;
}
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
At the moment I have this, a small DIV that slides in from the top to the center of a container DIV when the mouse hovers over the container DIV; but on mouseout, it slides back out to where it came from. What I'd like to do is have the DIV slide out of the other side of the DIV, directly opposite where it entered.
Is this possible using just CSS? (I imagine with JQuery it would be more straightforward)
<div class="blocks">
<div class="blocks_title">
</div>
</div>
<div class="blocks">
<div class="blocks_title">
</div>
</div>
.blocks {
position: relative;
float: left;
margin: 20px;
width: 100px;
height: 100px;
border: 1px dotted #333;
overflow: hidden;
}
.blocks_title {
position: relative;
width: 20px;
height: 20px;
top: 0px;
left: 40px;
background: #333;
opacity: 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
transition: all .25s;
}
.blocks:hover .blocks_title {
top: 40px;
opacity: 1;
}
And just when everyone is convinced that it's not gonna work with css only:
http://jsfiddle.net/Xkee9/36/
I used an animation for the mouseenter and a transiton for the mouseleave
Edit: added firefox fix
Edit: Explanation:
(I always use -webkit- -prefixes, just to explain it in Chrome and Safari, Firefox uses the -moz- -prefix, opera the -o- - prefix)
When nothing happens:
the block is at the bottom of the div.blocks (top:80px;), with an opacity of 0, also there is no animation running
When hovering:
the block moves instantaneous to the top with no transition (see:-webkit-transition: none;), because then the animation down-1 is running. That animation moves the block from top:0 to top:40px; in .25s. After the animation, the block stays at top:40px; because that's what I added in .blocks:hover .blocks_title.
When mousleaving:
there is no animation running anymore, but the block moves from top:40px to top:80px; in .25s because of -webkit-transition: all .25s;
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question