So, I've got this rather large overlay that I need to tile, and everything works as expected until I get to Internet Explorer. On Internet Explorer when it "tiles" horizontally, I get these odd lines that aren't a part of the original document.
The offending HTML and CSS:
<html>
<head>
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
width: 100%;
height: 100%;
position: relative;
background-color: #CCCCEF;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://dl.dropboxusercontent.com/u/177486/grit.tiny.png');
background-position: -900px 0%;
z-index: 1;
}
</head>
<body>
<div class="overlay"></div>
</body>
<html>
Here's an image showing what it does:
Example on JSFiddle
Definitely an IE bug. Semi-answer found here. Basically, images with alpha and certain aspect ratios on Windows 8+ (IE 10/11) will reproduce this. Switching to a 1:1 aspect ratio image (in this case) will avoid tiling bug. Not a great solution since you have to modify your image, but if you can modify image dimensions- it works.
Related
I am trying to build a full screen 'modal' that displays images. I am making the modal by creating a div with maximum height and width, giving it a large z-index & fixed position.
Inside that modal, I have placed an image. I am trying to automatically size the images with this css:
.center {
width: 100%;
object-fit: contain;
height: 100%;
}
This works on desktop, but on mobile the browser address bar, tabs, and other controls often overlap the content requiring the user to scroll to see it. Is it possible for my image to fit inside the available space and be entirely visible without scrolling? Do I need to account for the extra space the browser could take up (maybe with padding or margins) and just consider it lost? In my actual implementation, we want to disable scrolling because this is a fullscreen modal (using react-scrolllock).
My Example code is below, which can also be found here: https://github.com/ericdcobb/fullscreen-image
and is hosted as a github page:
https://ericdcobb.github.io/fullscreen-image/
<html>
<head>
<style>
.full {
right: 0;
bottom: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
z-index: 12348;
border: 0;
margin: 0;
background: #222222;
}
.center {
width: 100%;
object-fit: contain;
height: 100%;
}
</style>
</head>
<body>
<div class="full">
<img class="center" src="Hello%20World.jpg"/>
</div>
</body>
</html>
You can use the object-fit tag. Try it like this:
<style>
.center {
display: block;
position: relative;
width: 100%;
object-fit: contain;
}
I'm looking for a HTML & CSS way to display this embed video as a 75vh height hero background.
For now, the iFrame keep his width: 100% and his height: 75vh but the images in itselves aren't covering the whole header width.
Actually, I need it to behave like a background-size: cover property.
Here is a quick attached jsfiddle to illustrate this issue, best way to see it is in a new tab.
https://jsfiddle.net/wollsale/9yrvLy72/
PS : I know there is a loads of articles talking about that kind of problem, but I didn't found a solution that works for me.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}
<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>
EDIT
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
This article explain how to use HTML & CSS only to kind of "crop" a video in order to make it covering to whole viewport.
https://fvsch.com/code/video-background/
See it in action with this great codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
There seems to be an issue in IE 9, 10, 11 and Edge with pseudo elements where if they have a repeating background that is semi-transparent, the first half of the background-image is a lot darker than the rest of the image (almost as if there is overlap between the images). It's fine in all other browsers and seems to be such a unique thing that I couldn't find any references about it anywhere.
The effect that is trying to be achieved is to have an image shown, and a pattern with a certain opacity placed over the top to create a subtle pattern effect. Whilst there are other ways that this could potentially be achieved, this seems to be the easiest way.
Image: Example of what is currently happening.
I made a quick CodePen example. If you look on any version of IE or Edge you'll notice that once the image has been displayed in full already, the second time it is repeated, the first half of the image is noticeably darker than the second half of the image as if that half has a higher opacity on it.
CodePen: Example of the issue with code.
As you can see, the first image with a very basic pattern is fine. The second image though is quite large and has the same issue and I can't figure out what is causing it to do such a thing. Both images are repeating in the exact same way.
This is the code for the pseudo element, nothing out the ordinary in terms of CSS3 attributes or tricks etc.
.element::after {
background-image: url(http://example.com/image.png);
background-repeat: repeat;
width: 100%;
height: 100%;
display: block;
content: "";
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
A very strange bug. No idea why this happens. The problem is in the picture. If you reduce it to 1000px in width, for example, it will work well.
body {
background-color: #232323;
}
.wrap {
width: 100%;
margin: 0 auto;
float: none;
display: block;
}
.slider2 {
width: 100%;
height: 200px;
margin: 10px 0;
padding: 10px;
float: left;
display: block;
box-sizing: border-box;
position: relative;
}
.slider2::after {
content: "";
opacity: 1;
width: 100%;
height: 100%;
display: block;
background-image: url('http://i.imgur.com/tmGMRCB.png');
background-repeat: repeat;
background-position: top left;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="wrap">
<div class="slider2" style="background-image: url(http://img.wallpaperfolder.com/f/4A4B79479EAC/desert-sand-dunes-u6n12nvy10.jpg); background-position: top center;">
Slider 2
</div>
</div>
Solution: try to change picture.
An issue I'm having is strange lines appearing in certain situations. So far I only notice the issue in Webkit browsers. Also, I know my HTML is not done in the most efficient way, but for the purposes of my project, I would like it to remain the same, unless it is the cause of the issue. For my current work, it happens when I highlight text, or click certain things. This is a big issue since highlighting will be done a lot on my page. Please see my example below, note the extra blue areas in the first image are caused by highlighting text (not shown).
As you can see, when the page loads the lines are not present, however — after using the page for a bit, lines like this appear.
I did my best to recreate the problem in JS fiddle, and I was actually able to. If you highlight text, and then click off the text, you should see a line appear.
Here is my JSFiddle example.
Here is a a picture of the issue reproduced in JSFiddle.
HTML:
<div class="container">
<div class="background-image">
<div class="background-color"></div>
</div>
<div class="box">
<div>Highlight all text</div>
<div>Keep going!</div>
<div>Then click off to deselect</div>
</div>
</div>
CSS:
.container {
width: 500px;
height: 500px;
position: relative;
}
.background-image{
background: url('http://i.imgur.com/4pgHkXy.png') repeat;
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-transform: scale(1.05,1.05);
transform: scale(1.05,1.05);
top: 0;
left: 0;
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
}
.background-color {
background: #00adee;
opacity: .5;
width: 500px;
height: 500px;
position: aboslute;
top: 0;
left: 0;
}
.box {
background: #fff;
top: 20px;
bottom: 20px;
width: 200px;
height: 300px;
position: absolute;
}
.box div {
margin: 10px;
width: 180px;
height: 50px;
background: #ccc;
}
If I had to make a guess, I would assume it has something to do with the blur effect?
Any idea how to fix this?
Also reproducible on Mac OS X / Latest Chrome.
This is a bug in Webkit that seems to be caused by combining transform:scale with filter:blur. If I remove the transform in the jsfiddle, the glitch is no longer reproducible: https://jsfiddle.net/2fr6tcgz/
If the only reason you're using scale is to hide the blurry edges of the background, you could use background-size: 105% auto; background-position: center center; as a workaround: https://jsfiddle.net/xa23ja88/ (I also fixed the position: aboslute; typo).
Update:
Apparently the above doesn't fix it completely. But this does: https://jsfiddle.net/o0mupqbo/ (switching the nesting of background image and color). Does that work in your situation?
I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9.
My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox.
Why?
What are my options for workarounds?
EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff.
HTML:
<div class="bg">
<div class="a">
<div class="aa">titlebar</div>
<div class="b">
<!-- many lines of content here -->
</div>
</div>
</div>
CSS:
body { overflow: hidden; height: 100%; margin: 0; padding: 0; }
/* IE8 needs ruleset above */
.bg {
background: #333;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */
}
.a {
background: #eee; border: 3px solid #000;
height: 80%; max-height: 800px; min-height: 200px;
margin: 0 auto;
position: relative;
width: 80%; min-width: 200px; max-width: 800px;
}
.aa {
background: lightblue;
height: 28px; line-height: 28px;
text-align: center;
}
.b {
background: coral;
overflow: auto;
padding: 20px;
position: absolute;
top: 30px; right: 0; bottom: 0; left: 0;
}
Here's a demo of the problem: http://jsbin.com/urikoj/1/edit
I found out what's going on, and it's not the doctype, nor anything about the code that needs changes.
It's that jsbin's edit page doesn't support IE8 - the exact same demo viewed in full* is styled correctly in IE8.
In edit mode, jsbin seems to apply quirks mode or something odd like that when viewed in IE9 with IE8 browser mode and IE8 document standards. Surprisingly, the demo also works with IE7 browser mode and document standards (quirks mode off).
*the link goes to a later revision, but the only change was to remove all the attributes from the <html> tag - I had added these for testing. So, the demo is fine without those attributes, and with the html5 doctype.
I once fixed this issue by:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:x2="http://www.w3.org/2002/06/xhtml2">
Make sure your page is declared as HTML5
<!DOCTYPE html>
The problem with the vertical aling in IE<9 should be solved with this:
.bg {
text-align: center;
}
.a {
text-align: left;
}
But I don't know what's going wrong with the absolute position