Safari 7.0 Voice Over & CSS Overflow property? - drop-down-menu

I have the following scenario below-
HTML
<ul>
<li>Messi</li>
<li>Ronaldo</li>
<li>Neymar</li>
<li>Fabregas</li>
<li>Rooney</li>
<li>Bale</li>
<li>Ozil</li>
<li>Gerrard</li>
<li>Torres</li>
</ul>
CSS
ul{
list-style-type: none;
max-height: 65px;
outline:none;
overflow: auto;
width:200px;
}
li{
height: 20px;
padding: 10px 0;
text-indent: 10px;
width: 200px;
}
Now when i open this in Safari 7.0 (Mavericks) & use Voice Over Reader, first few items the black outline comes around the <li> items but after that the Voice Over reads the items but the black outline doesn't come on them. Also the items are hidden below the overflow clipped region.
This works fine in Safari 6.0.
I believe it has got to do something with the overflow property.
Any explanation & solution for this? Help is appreciated.
Thanks.

Related

CSS overflow, border-radius, mix-blend-mode, will-change : Depending on the width of the screen, the position of the element changes

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.

css dropdown menu very slow on windows mobile

I am having a very slow menu drop down experience on windows mobile only. it works ok on chrome and android pc's etc.
image of drop down, GREEN sub menu is very very slow to apper on windows mobile phones (only) you have to keep the logon pressed for at least 1.5 secs before sub menu appears. I would be grateful if somebody could look at the CSS code an see if I need to add / alter any of the settings in CSS
small piece of my nav code
<nav>
<ul id="main-nav" class="clearfix">
<li> Log in
<ul>
<li> Members area </li>
<li> Rythe Centre </li>
<li> Members Email IT Support</li>
</ul>
</li>
</nav>
#main-nav a {
font-size: 100%;
padding: 6px 5px 3px 3px;
margin: 0px;
}
#main-nav a:hover {
padding-right:20px;
}
#main-nav ul a {
padding: 6px;
height: 10px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
font-size: 100%;
background: #090;
}
#main-nav ul a:hover {
background: #000;
}
#main-nav ul ul li:first-child a:after {
position:absolute;
left: -8px;
}
#main-nav ul ul {
top: 0;
left: 90px;
}
#main-nav ul a {
width: auto;
}
#main-nav ul ul a {
background: #f90;
I eventually found the solution, in this post
4 novel ways to deal with sticky :hover effects on mobile devices..
http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml
emphasized textCSS's venerable :hover pseudo class forms the backbone of many CSS effects, triggered when the mouse rolls over an element on the page. In today's changing landscape however where touch screen inputs share center stage with the mouse, this has presented a bit of a conundrum for webmasters. Touch based devices in an effort to not be left out in the cold with such a pervasive CSS feature do respond to hover, but in the only way that's possible for them, on "tap" versus an actual "hover". While this is overall a good thing, it leads to what's known as the "sticky hover" issue on these devices, where the :hover style stays with the element the user just tapped on until he/she taps again elsewhere in the document, or in some circumstances, reloads the page before the effect is dismissed.
I have used Method 4- Dynamically add or remove a "can-touch" class based on current user input type.
Good luck.
Mark

Parallax scroll fixed header

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;
}

Border-radius Safari

I am making a banner where people can upload an image.
Before the upload it you see the image. With just a standard html code
<div id="box"><img src="blah blah" /></div>
The CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.
Example:
This is Chrome and Firefox. You can see the image will fit with the screen and got a nice border-radius on the top.
This is Safari. You see that the image dont have a border-radius on the top. I dont know the problem.
For that i also tried to use:
-webkit-
But that also didnt work. Anybody know how to fix that for safari?
please Update Below css and Check .....And make necessary changes as per your requirmnet..
hope this will solve your problem
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D9D9D9;
}
Please Mark answer if your problem is solved...
This is all you need:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}
Keep it simple. :-)

My Pages Do Not Render after auto updating to 7.0 - text-overflow: ellipsis

After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.
I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.
I made a sample html page that shows the problem.
In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?
Does anyone have a suggestion?
<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
.slick-headerrow-column {
background: #d5d5d5;
border-bottom: 0 none;
height: 100%;
margin-left: 2px;
padding-top: 2px;
}
.slick-headerrow-column, .slick-cell {
cursor: default;
float: left;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 1;
}
.inforFilterButton {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
border: medium none;
height: 16px;
left: -3px;
position: relative;
top: 4px;
width: 20px;
z-index: 10;
}
</style>
</head>
<body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"> </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
</body></html>
Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.
Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...

Resources