Related
How can I move the scroll bar from the default right side of the screen to within a container/div? Using div style="height: 1000px; overflow-y: scroll;" i was able to create a new scroll bar for that container but there still is an outside default scroll bar that scrolls some of the div as well so each scroll bar basically scrolls half the screen. I only want the inner div to be what holds the scroll bar
Have you tried setting overflow to hidden on the outside container?
<div style="overflow: hidden;">
<ul style="height: 50px; overflow: auto;">
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</div>
If an element has a scrollbar, it simply means the content is bigger than the element's height.
overflow: hidden simply hides the scrollbar but you won't be able to scroll and so any content past the element will be cut off.
Point is, if the outer box holds all the content, you can't just make a smaller box inside and let that do the scrolling.
You can't tell an element (e.g: <body>) to place its scrollbar into another element. Each element has its own scrollbars, which are independent of each other. So if you don't want scrollbars on body, you either:
forbid scrolling (bad): give it overflow-y: hidden. This has the disadvantage of making content unaccessible, by cutting off whatever doesn't fit the current height of the element
or make sure the sum of its children's sizes is not bigger than the available space (good). In your case, you have to limit the vertical size of the <body> (or a .container) to 100vh.
Here's an example, using display: grid:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header,
footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
max-width: 600px;
margin: 0 auto;
/* optional: */
min-height: 10rem;
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
border: solid #eee;
border-width: 0 1px;
}
.main .box {
margin-left: 15px;
}
<div class="container">
<header>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div class="main">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div class="box">
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>
So what's going on?
I placed three children in the container: <header>, .main and <footer>. Using grid-template-rows, I've instructed the grid to allow header and footer to take up whatever they need and give all the remaining space to .main.
This solution runs the risk that .main remains without enough height if header and footer sum up to the entire height.
To fix this problem, you might want to set a min-height on .main, but this will create the second scrollbar on narrow devices, which we want to avoid.
Another fix for this problem is to remove the height restriction of .container on those devices (thus moving the scrollbar back to .container). Example:
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.container {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 10%), 0 3px 4px 0 rgb(0 0 0 / 7%), 0 3px 3px -2px rgb(0 0 0 / 6%);
position: relative;
padding-right: 15px;
}
.container .main {
background-color: #f5f5f5;
overflow-y: auto;
}
#media (max-width: 768px) {
.container {
height: auto;
}
header, footer {
padding-right: 0;
}
}
/* this is optional */
.box {
padding: 1rem;
max-width: 600px;
margin: 0 auto;
}
<div class="container">
<header>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue
non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
</div>
</header>
<div class="main">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a fringilla turpis. Praesent in quam maximus, vestibulum est eu, posuere risus. Donec iaculis mattis nisl. Vivamus porttitor lorem sed turpis fermentum imperdiet. Nunc viverra commodo augue non pulvinar. In et dui sed orci placerat condimentum. In hac habitasse platea dictumst.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
<p>Donec mattis eros ipsum, et fermentum mi hendrerit id. Quisque sed pretium felis, sit amet finibus purus. Nam lorem ex, tempor ut turpis a, gravida venenatis nisi. Curabitur porttitor felis vel nunc vehicula imperdiet. Fusce sed viverra erat. Praesent eu turpis eros. Vestibulum massa lorem, bibendum non ipsum placerat, pharetra efficitur sem. Suspendisse auctor nisl non massa interdum efficitur. Praesent posuere sit amet lectus a convallis. Mauris ac urna nec lorem tincidunt dapibus. Curabitur maximus, lectus at imperdiet pharetra, metus magna mollis dui, eu bibendum quam ante nec neque.
<p>Curabitur eget porta sapien. Sed sed dolor non nibh rutrum placerat non ut tellus. Etiam convallis dui elit, eu cursus justo vehicula convallis. Nulla vel tortor ac augue rutrum mollis. Donec et mollis nisi, eu cursus nisi. Duis facilisis leo eu urna porttitor maximus. Pellentesque in lobortis arcu, eu consequat ante. Donec congue sed enim non aliquet.
<p>Praesent nunc lectus, consectetur nec turpis id, aliquet accumsan elit. Vivamus aliquam in neque in auctor. Pellentesque fermentum sodales ex, sed dapibus ligula ullamcorper vel. In pretium mollis dui in posuere. Nulla facilisi. Proin vehicula elit odio, at sollicitudin felis faucibus eget. Vestibulum semper et nibh id posuere. Maecenas imperdiet nulla diam, eu mollis sapien laoreet et. Proin sit amet tortor mi. Integer a arcu sapien. Vestibulum sit amet lacus euismod, faucibus velit vitae, eleifend tortor. Maecenas sollicitudin pulvinar hendrerit.
<p>Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus, ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</div>
<footer>
<div class="box">
Duis vitae metus turpis. Praesent a nisl mi. Nulla semper tempus lectus accumsan tincidunt. Quisque laoreet leo ut dui tempus, eu condimentum arcu ultricies. Donec at dui augue. Donec ornare interdum mauris fermentum laoreet. Pellentesque at mollis metus,
ac fermentum lorem. Nullam porta lacus fermentum libero volutpat, nec feugiat dolor varius. Pellentesque elit lorem, vulputate eget tincidunt nec, consectetur quis neque. Donec urna nunc, porta sit amet ullamcorper et, mollis at velit. In eget finibus
nisl, at semper nibh. Curabitur eu lectus at leo porttitor faucibus eget eu enim. Praesent commodo fermentum orci a fringilla.
</div>
</footer>
</div>
I'm developing a web app and have a responsive (parallax) full screen background, that is adjusting on screen height and width. Problem is, that on MOBILE the background "ends" above the toolbar. If I'm scrolling down (and later up) with Firefox, I'm getting a jumpy effect with the content that is below the background, because it's adjusting to the toolbar.
I know that it is a well known problem, but I still can't find a fitting solution in my case. I added a screenshot below at what I'm trying to achieve.
I currently have the following:
.page-header-image {
filter: blur(4px);
background-image: url("../../../assets/images/party-blue-kite.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - calc(100vh - 100%));
width: 100%;
position: fixed; // -> jumpy effect -> nullified through height transitition
// position: absolute; -> laggy on scroll
z-index: -1;
transform: scale(1.5);
transition: height 999999s;
}
What I'm trying to achieve
On mobile devices the 100vh value is indeed altered when the toolbar is visible what causes the jump effect of the background image. Applying a background image with a before on the body element reduces this effect.
body {
font-size: 3rem;
margin: 0;
position: relative;
}
body::before {
background-image: url('https://i.imgur.com/MrGY5EL.jpg');
background-position: center;
background-size: cover;
content: '';
display: block;
height: 100vh;
position: fixed;
width: 100%;
z-index: -1;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan quis ex eu pharetra. Curabitur ullamcorper nisl purus, quis rhoncus ipsum gravida efficitur. Integer sed massa orci. Aliquam et lorem quam. Morbi efficitur purus sit amet ex pulvinar, quis pharetra mauris aliquam. Duis in nunc mattis, fringilla nisl eu, placerat ligula. Etiam ut pellentesque arcu. Nulla facilisi. Vestibulum ac mauris ornare, malesuada odio sed, pharetra dolor. Donec eu elit nisl. Vestibulum purus felis, aliquam quis ultricies vel, pretium at enim. Pellentesque feugiat pulvinar sagittis. Praesent nec arcu nec mauris posuere ultrices nec in eros. Mauris dignissim turpis et dolor aliquet, id tempus elit porta. Nunc convallis aliquam mollis. Mauris nunc nulla, molestie et ultrices a, scelerisque et massa. Duis et diam nec urna rutrum feugiat eu id purus. Morbi convallis elit turpis, quis eleifend nulla viverra eu. Pellentesque vel gravida lacus, eget sodales dui. Vestibulum ullamcorper vesti sit amet nibh. Fusce ac massa felis. Nullam placerat tellus enim, vel congue libero bibendum ullamcorper. Aliquam sollicitudin non massa vel interdum. Vestibulum sit amet nunc condimentum, porttitor purus at, ultrices felis. Duis ultrices accumsan ligula id vestibulum. Donec massa justo, lacinia nec euismod sit amet, euismod non ex. Integer posuere euismod sapien vel convallis. Ut auctor, odio in cursus accumsan, enim magna vulputate dui, ut auctor enim tortor a nibh. Nulla commodo, ex eu placerat pulvinar, mi mi iaculis arcu, a facilisis lectus orci ornare lacus. Donec eget odio venenatis, aliquet augue vel, sagittis dolor. Quisque non dolor nec ipsum lobortis dignissim eget non ebulum nulla. Integer gravida posuere mi, sed pellentesque leo elementum ut. Mauris pharetra neque a commodo congue. Mauris consequat justo lacinia, lobortis mi vel, venenatis turpis. In hac habitasse platea dictumst. Nullam venenatis velit vel pharetra accumsan. Curabitur euismod semper molestie. Etiam blandit, mi lacinia commodo vulputate, leo velit consequat mi, a eleifend magna enimnim. Nunc in rhoncus ligula. Suspendisse consequat ac sem id pharetra. Nulla porta, tortor in rutrum ornare, dui magna consectetur ipsum, in tincidunt urna enim nec dui. Integer laoreet felis sem, at sagittis ipsum ullamcorper vel. Nullam mattis felis eget ipsum dignissim, sed lacinia nisi pellentesque. Sed sodales purus et nisi pretium, eu aliquet leo sagittis. Morbi pharetra, felis non semper ullamcorper, ante mauris condimentum sapien, a ultrices est turpis vel nisl. Curabitur lacus urna, tristique ac pretium a, vestibulum eu libero. Mauris tincidunt tellus ac vulputate tincidunt. Sed ultricies orci mattis diam lacinia sodales. Sed nec felis auctor, bibendum elit et, sodales dui.
I've been trying to get this text underline transition to work: https://codepen.io/shshaw/pen/pdyJBW
a, .strike {
color: #FF5151;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
.strike {
color: #307672;
background-size: 0% 2px;
background-position: 0 0.5em; /*1em;*/
}
.strike:hover,
.strike:focus {
background-size: 100% 2px;
transition-delay: 0s;
}
html {
background: #000249;
color: #FFF;
font-size: 62.5%;
display: flex;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
max-width: 30em;
width: 90%;
margin: auto;
background: inherit;
-webkit-font-smoothing: antialiased;
font-smoothing: always;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Strike me! Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
And I've got it working in all major browsers except IE11. I've seen this SO question (Background size animation not working in IE11 or Ipad) where the accepted answer says: "Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones."
That answer also links here: https://www.w3schools.com/cssref/css_animatable.asp
Which lists the animatable properties, and lists background-size as one of those animatable properties, but when I try to run their example (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_background-size) in IE11, it doesn't work.
I can't seem to find any documentation that explicitly lists the animatable properties in IE11, so is background-size simply not animatable in IE11, and is there any documentation that says so?
I'm working on a profile-kind-of template – half the page (class="actor-info") should show scrollable text and info about a person and the other half should be filled by the person's portrait picture. The picture should always fill half of the screen – so cropping would be fine.
What I have so far:
all ancestor element set to height 100%
left column and right column are both flex boxes
the image container has the property object-fit: cover;
the image container has the property position:fixed;
the image hight and width are set to auto
Basically it looks 'as if' it worked right – but when changing the browser window with the image doesn't adopt to the width – so at some point the portrait doesn't fill the height.
What I have so far:
<div class="layout">
<div class= "actor-info">
Lorem Ipsum
</div>
<div class="actor-portrait">
<div class="img-container">
<img src="…">
</div>
</div>
</div>
CSS:
html, body, .layout {
width: 100%;
height:100%;
}
.actor-portrait,
.actor-info {
width: 50%;
height:100%;
}
.actor-portrait .img-container {
height:100%;
}
.layout {
align-items: stretch;
display: flex;
width: 100%;
height:100%;
}
.actor-portrait .img-container {
object-fit: cover;
position:fixed;
}
.actor-portrait .img-container img {
width:auto;
height:auto;
}
I hope somebody has done this / been there before? All pointers appreciated! Thank you!
EDIT: I added a 'wireframe' of what i have – and what i would like to have. The image should 'cover' the red rectangle at all times and would get cropped ba the rectangle (.img-container).
As you use predefined width's and height's, you can simplify the code a lot and use background and background-size: cover to accomplish that.
Stack snippet
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background: url(http://lorempixel.com/400/400/nature/1/) center no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
</div>
</div>
And if you need to set the image source in the markup, you can do that too.
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait"
style="background-image: url(http://lorempixel.com/400/400/nature/1/)">
</div>
</div>
If you still want to use object-fit: cover you can, though it has less browser support than background-size: cover
html, body {
margin: 0;
}
.layout {
display: flex;
height: 100vh;
}
.actor-portrait, .actor-info {
flex: 0 1 50%;
}
.actor-info {
overflow: auto;
}
.actor-portrait {
display: flex;
}
.actor-portrait img {
object-fit: cover;
width: 100%;
min-width: 0; /* allow a flex item to be smaller than its content */
}
<div class="layout">
<div class="actor-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce leo lorem, mollis accumsan posuere a, sagittis eget magna. In sem est, rutrum ultrices bibendum id, convallis eu purus. Curabitur tincidunt metus mollis aliquet pharetra. Aliquam sed massa
nec neque pulvinar lacinia. Integer tempor dolor justo, quis commodo magna aliquet a. Cras mi ipsum, tempus facilisis auctor non, mattis id justo. Nullam facilisis magna justo, nec consequat dolor luctus nec. Fusce eu dignissim lacus, eu tempor tortor.
Nulla facilisi. Etiam sit amet tristique sapien, eget euismod velit. Vivamus egestas quis nulla malesuada ullamcorper. Quisque euismod dolor vel sem iaculis, in commodo leo convallis.
<br><br> In in massa facilisis, gravida mi a, dignissim leo. In neque tellus, vulputate eget lorem ut, tincidunt commodo neque. Donec viverra imperdiet ligula et sagittis. Aenean sed cursus odio. Praesent tristique magna vitae lectus luctus sodales.
Integer eget leo vitae lacus venenatis lacinia. Integer bibendum lectus tristique turpis tincidunt dignissim. Maecenas faucibus viverra porta. Praesent non dui a metus fermentum molestie. Vestibulum blandit massa id massa facilisis bibendum. Nunc
iaculis, ipsum sed dignissim sollicitudin, elit purus porttitor odio, hendrerit ornare purus arcu id mauris. Sed et gravida felis, ac imperdiet justo. Proin tincidunt vestibulum cursus. Pellentesque in urna leo.
<br><br> Donec nec ultricies eros, sed varius neque. Aliquam sed nisi nulla. Suspendisse hendrerit, orci placerat bibendum vehicula, nisl sem pellentesque nibh, commodo tincidunt lacus orci non erat. Aliquam in quam tincidunt, condimentum diam id,
aliquam lectus. Nullam ut commodo dolor, a gravida magna. Nunc viverra massa eu lobortis tristique. Aenean tristique orci erat, tempus accumsan arcu vulputate a. Nunc consequat congue ante. Cras magna lorem, ultrices eu elit eget, luctus faucibus
neque. Sed dictum fermentum lectus. In bibendum dictum ligula in pharetra. Nullam venenatis vitae sapien a fermentum.
</div>
<div class="actor-portrait">
<img src="http://lorempixel.com/400/400/nature/1/" alt="">
</div>
</div>
I actually did something similar on a site, but I had a fixed side nav to deal with too: polarlab.anchoragemuseum.org.
I don't remember exactly where I found this code initially, but the trick is the css on the image. I've adjusted the markup and css a bit to accommodate a fixed image.
Here's a fiddle for reference as well.
.banner {
position: fixed;
width: 50%;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.banner__image {
max-width: none;
min-height: 100%;
min-width: 100%;
position: absolute;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
}
.text {
width: 48%;
float: left;
font-size: 24px;
line-height: 34px;
}
<div class="wrapper">
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit sollicitudin turpis, eget pulvinar nulla efficitur non. Sed fermentum est interdum odio lobortis tempor. Mauris euismod molestie sapien sit amet pharetra. Suspendisse condimentum, velit in egestas tristique, augue nunc rutrum odio, sed imperdiet arcu velit ac lectus. Nam tortor magna, venenatis vel diam sit amet, elementum tempor massa. Aenean pretium lectus at enim commodo, ac dignissim dui tempor. Maecenas tincidunt tellus bibendum, porta erat non, pellentesque mauris. Vestibulum lacus nisi, cursus at bibendum ut, pulvinar eu elit. Nulla sodales nunc in quam ornare, non ultrices risus sollicitudin. Nullam gravida non turpis nec tempor. Fusce rhoncus consequat dolor, at euismod metus mattis eget. Maecenas ligula tellus, viverra at mi eu, commodo lacinia enim. Proin auctor sem eu risus malesuada, eu ullamcorper mauris elementum. Morbi commodo mi congue sagittis euismod.</p>
<p>Aliquam cursus interdum diam sed aliquet. Aliquam sollicitudin rutrum diam. Integer viverra, dolor non pulvinar aliquam, enim diam faucibus purus, at suscipit nulla sapien eu augue. Curabitur maximus, nulla vitae faucibus sodales, justo erat suscipit odio, a porttitor turpis ex ut nibh. Curabitur finibus fermentum lectus, vitae pharetra quam convallis in. Nam sollicitudin finibus libero, ut mattis nunc vestibulum nec. Proin gravida dapibus velit.</p>
<p>Ut id augue est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris lobortis ac purus fringilla tempus. Morbi nec diam in orci luctus malesuada. Duis consequat tortor tellus, hendrerit interdum metus maximus quis. Nulla non aliquet tortor. Nunc at quam non nibh volutpat pulvinar ut id nisi.</p>
<p>Curabitur ullamcorper dolor eget odio sodales, sit amet consequat est iaculis. Praesent vel consectetur nisi. Quisque tempus nisi quis mollis tincidunt. Pellentesque fermentum mauris enim, id feugiat lorem malesuada ut. Maecenas eleifend lacus a eros hendrerit efficitur. Nunc blandit quam auctor, auctor elit accumsan, dapibus sem. Mauris commodo enim nec ligula congue convallis. Cras cursus cursus felis, quis tempus orci eleifend in.</p>
<p>Mauris rutrum imperdiet ipsum, mollis pretium ipsum maximus id. Vivamus interdum non metus sed imperdiet. Nunc pharetra nisi id nisi convallis, nec gravida felis aliquam. Vestibulum quis molestie purus. Quisque a aliquet magna. Sed gravida quis sem id congue. Donec dolor est, sollicitudin at leo vitae, fringilla tempor mauris. Donec sodales mi vitae sem molestie tincidunt. Fusce ut elit nunc. Cras ullamcorper pharetra augue vitae lobortis. Maecenas hendrerit vulputate suscipit. Ut ut ante elit. Quisque mollis non felis sit amet aliquam. Ut suscipit vel nisi ac lobortis.</p>
</section>
<section class="banner">
<img src="http://www.canvaz.com/portrait/charcoal-1.jpg" class="banner__image">
</section>
</div>
I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.