Links breaking on hover in IOS 7 - html

I have a series of divs with images, links, and spans nested within them. The problem only seems to happen on IOS 7.0.4 (iPhone 5S). There is a hover state on these elements that works fine on every device EXCEPT for this one where the links simply don't work. Any ideas or suggestions are much appreciated.
HTML:
<div class="project">
<img width="300" height="180" src="my-image.jpg" class="attachment-full" alt="Thumb">
<a href="/misc/link">
<span class="project-alt">
<span class="project-title">My Title</span>
</span>
</a>
</div>
CSS:
.project {
/*margin: 25px 25px 30px;*/
margin: 20px 7px 30px;
width: 300px; height: 180px;
display: inline-block;
position: relative;
border: solid 1px #016e96;
box-shadow: 0 0 15px 3px #9e9e9e;
}
#portfolio .project img {
position: relative;
max-width: 300px;
max-height: 180px;
width: 100%;
height: auto;
}
.project a {
text-align: center;
display: block;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.project a:hover .project-alt {display: block;}
.project-alt {
background-color: rgba(0, 174, 239, 0.7);
margin: 25px 25px 30px;
width: 100%;
height: 100%;
display:none;
z-index: 5;
position: absolute;
left: -25px;
top: -25px;
vertical-align: middle;
}
.project-title {
text-decoration: none;
font-size: 20px;
font-family: 'Titillium Web', sans-serif;
color: #ffffff;
font-style: italic;
font-weight: 700;
background-color: rgba(2,166,229, 0.8);
width: 230px;
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
padding: 10px;
}
So for whatever reason, the links don't work when clicked on an iPhone 5S running IOS 7.0.4. Any ideas how it handles the CSS :hover state?

You can't have a display:none on something that is revealed by hover on IOS. Use opacity or hide it with absolute positioned and on hover put it where it's supposed to go. Don't use visibility either.
Here's the full explanation: http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/
Also, check the z-index.
This is documented here: https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7

Related

Nav bar options been pushed to one side

just to preface I would say I'm rather new at coding, in particular, this is related to web coding.
I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine.
However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.
I've tried to edit the position (left) of each menu item but it doesn't seem to be working.
Visualisation of the problem
here is the HTML coding for it:
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav>
And here is the CSS
nav {
position: relative;
width: 100%;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}
nav a{
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
position: relative;
z-index: 1;
/* display: inline-block; */
text-align: center;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
background: whitesmoke;
border-radius:8px;
transition: all .5s ease 0s;
}
nav a:nth-child(1){
width:120px
}
nav .start-home, a:nth-child(1):hover~.animation{
width: 120px;
left: 00;
}
nav a:nth-child(2){
width: 120px;
}
nav a:nth-child(2):hover~.animation{
width: 150px;
left:102px;
}
nav a:nth-child(3){
width: 120px;
}
nav a:nth-child(3):hover~.animation{
width: 140px;
left: 230px;
}
nav a:nth-child(4){
width: 120px;
}
nav a:nth-child(4):hover~.animation{
width: 140px;
left: 350px;
}
nav a:nth-child(5){
float:right;
margin-right: 40px;
}
nav a:nth-child(5):hover~.animation{
width: 150px;
left: 1290px;
}
a:hover{
color: #c18392;
}
(Also I am aware the navbar doesn't navigate to anything yet)
Please help!
And thank you in advance
nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.
nav a:same as you have added.
nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense.
hover:adding different bgcolor on hover. but you can do anything you want
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
padding: 10px;
display: flex;
align-items: center;
gap: 10px;
width: 100vw;
height: 55px;
background-color: white;
border-radius: 8px;
font-size: 0;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}
nav a {
font-family: dunbar-tall, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 15px;
text-transform: uppercase;
color: #d79da8;
text-decoration: none;
line-height: 50px;
}
nav a:nth-child(5) {
margin-left: auto;
}
a:hover {
background-color: whitesmoke;
}
<nav>
HOME
ABOUT
RECIPES
GALLERY
SUBSCRIBE
<div class="animation start-home"></div>
</nav

Css :after and :before pseudo element not working properly in IOS

I am trying to dash after border in H tag using :after and :before it's working fine on desktop & android devices but create issue in IOS devices
border made using :after and :before but text of h element doesn't display
below is a demo of other devices
below is a demo of IOS devices
h2.service-heading {
font-size: 36px;
color: #762d2f;
text-transform: uppercase;
position: relative;
display: table;
margin-left: auto;
margin-right: auto;
max-width: calc(100% - 36px);
position: relative;
}
h2.service-heading::after {
content: '';
position: absolute;
width: calc(100% - 5px);
display: block;
height: 6px;
border-bottom: 6px solid #762d2f;
z-index: 9999;
clear: both;
left: 0;
bottom: 0px;
}
h2.service-heading::before {
content: '';
position: absolute;
width: 10px;
display: block;
height: 6px;
border-bottom: 6px solid #762d2f;
z-index: 9999;
clear: both;
bottom: 0px;
right: -10px
}
<h2 class="service-heading" align="center"> Our Services</h2>
Can anyone help with this
Thanks in advance
You don't need to pseudo element for that. Can be made easily with only background.
h2.service-heading {
font-size: 36px;
color: #762d2f;
text-transform: uppercase;
display: table;
margin-left: auto;
margin-right: auto;
max-width: calc(100% - 36px);
padding-right: 15px;
background: linear-gradient(#762d2f, #762d2f) 0 100% / calc(100% - 15px) 6px no-repeat,
linear-gradient(#762d2f, #762d2f) 100% 100% / 10px 6px no-repeat;
}
<h2 class="service-heading" align="center"> Our Services</h2>
Also can be used some CSS variables to control everything easily.
h2.service-heading {
--border-height: 6px;
--second-border-width: 20px;
--border-gap: 10px;
font-size: 36px;
color: #762d2f;
text-transform: uppercase;
display: table;
margin-left: auto;
margin-right: auto;
max-width: calc(100% - 36px);
padding-bottom: 5px; /* bottom distance of border */
padding-right: calc(var(--second-border-width) + var(--border-gap));
background: linear-gradient(#762d2f, #762d2f) 0 100% / calc(100% - (var(--second-border-width) + var(--border-gap))) var(--border-height) no-repeat,
linear-gradient(#762d2f, #762d2f) 100% 100% / var(--second-border-width) var(--border-height) no-repeat;
}
<h2 class="service-heading" align="center"> Our Services</h2>
I had the similar problem: dropdown-arrow for menu item performed as pseudoclass ::after didn't work for IOS. enter image description here
Next code snippet I utilized for SASS:
.nav-link {
border-top: 1px solid var(--color-white);
color: var(--color-white);
font-size: 18px;
line-height: 22px;
font-weight: 400;
text-decoration: none;
padding: 10px 15px 10px 0;
&::after {
content: " ";
border: none;
background-image: var(--arrow-down);
background-position: center center;
background-repeat: no-repeat;
width: 40px;
height: 20px;
}
}
so the solution was to remove arrows from pseudoclass ::after and perform it as a background image for menu item, like next:
.nav-link {
display: block;
border-top: 1px solid var(--color-white);
color: var(--color-white);
font-size: 18px;
line-height: 22px;
font-weight: 400;
text-decoration: none;
padding: 10px 15px 10px 0;
background-image: var(--arrow-down);
background-position: 98%;
background-repeat: no-repeat;
background: var(--arrow-down) no-repeat 98%;
&::after {
display: none;
}
}
I've noticed that IOS14.4 and lower doesn't support background-image, and older versions IOS are needed only full form background not just background-image:
background: var(--arrow-down) no-repeat 98%;

CSS clip-path replacement for IE

Does anyone know of CSS property that I can use to achieve the same result as clip-path to make rounded shapes around a div? My site needs to be compatible with the latest version of IE, but I checked on www.caniuse.com and clip-path is not supported on IE 11.
This is what I am trying to do:
My current code works as you can see in this codepen: https://codepen.io/CodingGilbert/pen/BqwoGm?editors=1100
The problem is, that this code won’t work in IE, how can I solve this? Surely there must be another CSS property which does the same.
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin:10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center; }
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
clip-path: circle(50% at 50% 50%);
background-color: #fff;
border: 0.8rem solid #fff; }
.card__text-content {
position: absolute;
top: 6rem; }
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem; }
In this case, border-radius: 50%; on the .card__img will give you the same result, and it's compatible with IE9 and above.
Demo:
body {
background-color: gray;
}
.card {
width: 80%;
height: 16.5rem;
border-radius: 5px;
background-color: #fff;
text-align: center;
padding: 0 1.5rem;
margin: 10rem auto;
}
.card__inner-wrapper {
height: 55%;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
}
.card__img {
height: 100%;
position: absolute;
bottom: 50%;
border-radius: 50%; /* instead of clip-path */
background-color: #fff;
border: 0.8rem solid #fff;
}
.card__text-content {
position: absolute;
top: 6rem;
}
.card__heading {
font-size: 1.8rem;
font-weight: 500;
color: #5fc0c3;
margin-bottom: 1.5rem;
}
<div class="card">
<div class="card__inner-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Light_bulb_icon_red.svg/2000px-Light_bulb_icon_red.svg.png" alt="Bulb icon" class="card__img">
<div class="card__text-content">
<h4 class="card__heading">We help charities</h4>
<p>Share knowledge and working practice to make the best technology choices.</p>
</div>
</div>
</div>
you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg

Textarea padding inconsistency in Firefox and Chrome

I have a padding on my textarea element and I would like the content to remain padded as you scroll within the textarea. It is working as expected in Firefox but not in Chrome. The below image shows the difference in output:
CSS:
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
}
In Chrome, the top and bottom padding only appears at the beginning and end of the text content. Here is a jsfiddle to demonstrate:
http://jsfiddle.net/LkE6f/
How can I make the padding in Chrome appear/render in the same way as it does in Firefox?
You could do something like this, it's not very flexible (fixed width), but you can expand on it. It fixes the issue in Chrome and doesn't break Firefox. It uses pseudo-elements on #container, which work in IE8+
textarea {
width: 250px;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
width: 225px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 6px;
}
Here's a jsFiddle.
Update: Added display: block to textarea to fix IE positioning issue.
Update 2: Alternative solution which takes its width from the #container div and for which you'd need to set the right value based on the width of the scrollbar of the browser, the 17px value is ok in Chrome at the moment. A pro with this solution is that you can set the width of the textarea to anything by changing the width of the #container, and the pseudo-elements will scale accordingly. jsFiddle.
#container {
width: 260px;
margin: 20px auto;
position: relative;
}
textarea {
width: 100%;
height: 160px;
padding: 15px;
font-family: Arial;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
overflow: auto;
resize: none;
display: block;
}
#container:before, #container:after {
display: block;
height: 15px;
background-color: #FFF;
position: absolute;
left: 1px;
right: 17px;
content:'';
}
#container:before {
top: 1px;
}
#container:after {
bottom: 1px;
}
Best answer:
Embrace the difference between browsers; the web is not uniform and your design will never be 100% identical across browsers.
Work around answers:
If you don't care about the scrollbar having a gap at the top and bottom, you can use borders and an outline like this.
OR
This can be achieved with a pseudo element, if you are happy wrapping each textarea in a div. Should display correctly on IE8+, FF and Chrome.
Have a fiddle!
HTML
<div class="textareaWrap">
<textarea>Content</textarea>
</div>
CSS
textarea {
position: relative;
width: 250px;
height: 160px;
font-family: Arial;
padding: 15px;
font-size: 12px;
line-height: 18px;
border: 1px solid #CCCCCC;
resize: none;
}
.textareaWrap {
position: relative;
}
.textareaWrap:after {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
bottom: 5px;
left: 1px;
}
.textareaWrap:before {
position: absolute;
content:'';
display: block;
width: 232px;
height: 15px;
background: #FFF;
z-index: 1;
top:1px;
left: 1px;
}
Try the below solution for the textarea
textarea {
-moz-appearance: textfield;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
-moz-user-select: text;
background-color: -moz-field;
border: 2px inset threedface;
color: -moz-fieldtext;
cursor: text;
font: -moz-field;
width:250px;
height:150px;
letter-spacing: normal;
line-height: normal !important;
padding: 1px 0;
text-align: start;
text-indent: 0;
text-rendering: optimizelegibility;
text-shadow: none;
text-transform: none;
word-spacing: normal;
}
Fiddle link Link
Regards
Mahadevan

How to vertically center div in fluid container?

I would like to be able to vertically center a div containing meta data such as Title and Author within a container that has a fluid width. In the example below, I would like the .meta div to be vertically centered within the article which is fluid width.
I tried following this article (http://css-tricks.com/centering-in-the-unknown/) but it doesn't work.
HTML
<div class="container">
<h3>Test</h3>
<article>
<div class="meta">
<div class="title"></div>
<div class="author"></div>
<img src="" />
</div>
</article>
</div>
CSS (using LESS)
.container {
h3 {
margin: -5px 0 0 0;
padding: 32px 0px 16px 0;
.freight-sans-pro;
font-size: 1.375em;
line-height: 1em;
font-weight: 200;
}
article {
max-height: 375px;
overflow: hidden;
position: relative;
z-index: 900;
margin-bottom: 2px;
background-color: #color-black;
line-height: 0em;
a {
max-height: 375px;
display: block;
img { opacity: .5; .opacity-transition; }
}
.meta {
width: 100%;
position: absolute;
bottom: 40%;
z-index: 500;
padding: 0px 10%;
color: #color-white;
font-size: 20px;
text-align: center;
.title {
margin: 0;
font-size: 2em;
line-height: 1em;
font-weight: 700;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
padding-bottom: 8px;
text-decoration: none;
display: block;
}
.author {
margin: 0;
font-size: .8em;
line-height: .75em;
font-style: italic;
text-transform: uppercase;
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.7);
text-decoration: none;
display: block;
}
}
}
}
Tried your Less but got an error in codepen.io so could not debug.
You could try something simple like this:
.container {
border: 2px solid blue;
width: 180px;
height: 120px;
overflow: hidden;
display: table-cell;
vertical-align: middle;
}
Check it working here
You might find this article useful as well: http://logconsole.com/vertical-align-center-image/
It's about vertically centring image, but in most cases you could just change image with a div.
Try this on what you want to be centered. I altered #domkoscielak's code so that it work.
.meta {
width: 180px;
height: 120px;
top: 50%;
margin-top: -60px; /*half of height*/
position: absolute;
}