Goal: static images with animations shown on :hover that do not exceed container width.
Fixed code:
/* wrapper paragraph*/
.rimg {
text-align: center;
overflow: hidden;
}
/* rely on contents for vertical size, show backgrund centered */
.rimg-gif, .rimg-png {
display: block;
position: relative;
background-size: auto 100%;
background-position: center;
background-repeat: no-repeat;
line-height: 0;
}
/* containers need max-width in IE */
.rimg img, .rimg-gif, .rimg-png {
margin: 0;
max-width: 99.99999%; /* Opera Mini ignores anything above this % */
max-width: calc(100% - 0px); /* for proper browsers */
}
/* hide the GIF background unless hovered */
.rimg-gif:not(:hover) {
background-image: none !important;
}
/* hide the static image when hovered */
.rimg-gif:hover img {
opacity: 0;
}
<p class="rimg">
<span class="rimg-png" style="background-image:url(https://i.imgur.com/iwczbln.png)">
<a class="rimg-gif" target="_blank" href="https://i.imgur.com/TLxp2di.gif" style="background-image:url(https://i.imgur.com/TLxp2di.gif)">
<img src="https://i.imgur.com/iwczbln.png">
</a>
</span>
Description
</p>
Final structure:
.rimg is just a container element for center-aligning things.
img is the static image (for semantics, printing, and default display). It is hidden via opacity when hovering, which allows to use the context menu to both get URL of GIF ("link") and static PNG ("image address").
.rimg-gif is the animated background GIF that is displayed when hovering (while hiding the static image). It is not loaded until hover. Doubles as a link to the actual GIF (for mobile users)
.rimg-png has a static background and is there solely so that the reader doesn't see the image briefly flashing before the GIF finishes loading the first frame.
There were a few issues with this:
In IE<=11 (non-Edge) sizing to fit width just outright doesn't work - the elements overflow the container instead.
Adding "max-width: 100%" to nested blocks fixed this (by this explanation).
Opera Mini similarly doesn't resize the images to fit container width, but aforementioned fixes for IE have no effect.
I was not able to find any explanations of this, but turns out that Opera Mini simply ignores max-width values roughly equal to 100% (>99.99999%). So I added that for Opera, and max-width: calc(100% - 0px) for modern browsers.
On StackOverflow's snippet preview, calculated height is slightly higher than that of image, which can be seen by it briefly starting to repeat on the bottom. The issue disappears by giving line-height: 0 to .rgif-alt but I'm not sure if that's a hack or not.
Edit: apparently so? Other options include float'ing the elements and using position: absolute, so I guess line-height is pretty alright for elements
Additional details:
HTML is generated from a markdown[-ish] extension so it does not strictly matter if it looks nasty or not. I would like to avoid having image dimensions / aspect ratio hardcoded into generated HTML if possible, though.
Trying to not have the animated GIF load until requested (mouseover), therefore a two-image trick is not preferable.
The intent to avoid JS is due to fact that pages with such elements can be shown inside an embedded browser with JS disabled completely. As you can imagine, having a popup window (or a default browser' tab) open for each animation is undesirable.
If anything is unclear, do tell.
After a bit of trial and error I managed to resolve the issues by myself, so I added notes on solutions and the final (working) code to the question.
I'm not 100% happy with opening a new tab on Android (ideally should play when single-tapping), but all tested browsers close such popup-tabs when pressing Back so maybe it's not too bad. I added a "play" button, which also doubles as a first touch event absorber for mobile (initially covers the link completely, resized to 0% width after a short delay to allow clicking the link). This works both for modern browsers (which trigger :hover and animation playback on first tap and can open link on second tap) and for Opera Mini (which simply opens a popup tab with the GIF). You can see this in action here, for example.
Related
I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element
See the frozen DOM state of the page in this Plunker.
The code should represent a modal with four tabs, of which the third tab content is open. Should look something like the image below (rendered in latest Chrome): three divs side-by-side which contain overflowing content and the divs are scrollable. On the bottom there's a div containing Plotting method text and a button. The same view is visible in Firefox as well.
What I see in latest Safari:
After disabling the style
height: 10px;
from .heatmap-multiple-variable-container
the rendered Safari content is:
notice how the third content div, which is scrolled way down, does not present all of its content (the Select all row) as it does in Chrome. Also the div containing Plotting method is not visible.
In Microsoft Edge, the div containing Plotting method is visible but the same scrolling problem as in Safari exists.
Any ideas on how to modify the Flexbox layout to display the menu in the same manner for all of the three browsers? I'm really stuck, so any pointers you can give me are appreciated.
Ok this was a hard one! Add this to your CSS and it should work. (tested in Safari)
body .multiple-variable-selection-columns-container {
height: calc(100% - 66px);
}
body .modal-menu .tab-content {
height: calc(100% - 57px);
}
body .modal-wide .modal-dialog .modal-content .modal-body {
height: calc(100% - 110px);
}
ng-include {
display: block;
}
You have added height: 100%; to elements who have neighbour elements with there own height. You have definitely to cleanup your markup, but the CSS above should work for the moment.
I have added the body to get a stronger selector to overwrite your code. I also added a default display style for ng-include tag, the browser doesn't know what kind of styles to use, so the tag has no hight and is hard to debug.
I hope I could help you.
I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I have a number of images on a page contained within a single sprite image, these images must be contained within the single sprite due to other requirements of the site.
Whilst this is working fine in most browsers I have an issue on Opera Mini where it is not rendering the sprite at all and just displaying the whole image.
Is there any CSS that can be used to provide a text alternative when the browser is unable to render the sprite?
Little confused. The sprite is not rendering but is displaying the whole image? Do you see all the sprites at once, or none at all?
You might use browser detection for opera mini (and any other mobile browsers where the rendering is not working as expected).
Add the desired text to the sprite element, and use a large negative text-indent to hide the contents.
Disable the indent and background images for unsupported browsers.
allbrowsers.css
div.sprite {
width:20px;
height:20px;
background:transparent url(img/mysprites.gif) no-repeat scroll top left;
overflow:hidden;
text-indent:-5000px;
}
#first_sprite {
background-position:20px 40px;
}
mobilebrowsers.css
div.sprite {
background-image:none;
text-indent:0;
}
page
<div id="first_sprite" class="sprite">Alternate text</div>