I've got an issue and can't solve it easily because appears only in one case : when i'm on my page and i switch from landscape to portrait, on iOS.
My app is a Phonegap app using Angular and plugin device-orientation to make it working with my responsive CSS.
All is fine, except this part.
I've got an horizontal menu and i wan't user able to scroll it if there is overflow.
Here is my code :
CSS
nav.inline {
background: #e4eeef;
outline: 1px solid #e4eeef; /* Safari bug rendering */
overflow: hidden;
overflow-x: scroll;
text-transform: uppercase;
-webkit-overflow-scrolling: touch;
}
nav.inline ul {
list-style: none;
min-width: 102%;
padding: 0 2%;
width: 102%;
white-space: nowrap;
}
nav.inline ul li {
display: inline-block;
white-space: nowrap;
}
nav.inline ul a {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: #4b8c95;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
line-height: 80px;
margin: 0 0.7em;
}
nav.inline ul a.active {
border-bottom: 4px solid #4b8c95;
}
HTML
<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>
And the partial associated
<ul data-snap-ignore="true">
<li><a ng-click="setTab('link1')">Link 1</a></li>
<li><a ng-click="setTab('link2')">Link 2</a></li>
...
</ul>
You can see "data-snap-ignore" because i'm using angular-snap.js for an other menu (left menu) and i don't wan't him to appear when i'm sliding this one (this part is working well).
Thanks for helping ;)
Yep, this sucks. It's a bug, AFAICT.
So far the only mechanism I've found to fix it is to toggle display from none to block on the container, like so:
var navElement = document.getElementsByTagName("nav")[0];
navElement.style.display = "none";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );
Which *looks * horrible, in my opinion, but it does restore the scrolling ability.
Since, as far as I can tell, it never breaks if the elements within force the container to scroll, it should work to ensure that the container always scrolls, even if by a pixel or two.
Related
There is a strange phenomenon on safari: border-radius of parent element doesn't work when child element has a background.
Everything is OK when remove -webkit-overflow-scrolling: touch;.
What happen when set -webkit-overflow-scrolling: touch; in safari ?
How can I keep -webkit-overflow-scrolling: touch; and prevent the strange phenomenon at the same time?
html,
body {
background: red;
}
* {
padding: 0;
margin: 0;
}
.main {
height: 250px;
width: 250px;
margin: 10px;
overflow: scroll;
border-radius: 20px;
background: green;
-webkit-overflow-scrolling: touch; //ios平滑滚动
}
ul li {
list-style-type: none;
}
li:nth-child(even) {
background: gray;
}
<div class="main">
<ul>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
<li>This covers miscellaneous DOM extensions used by Safari in macOS and iOS. These extensions include DOM touch events for processing gestures for devices that have a touch screen and visual effects that support 2D and 3D transforms, animation, and transitions.
Most of the classes described in this reference are Apple extensions that may also be proposed W3C standards.</li>
...
</ul>
</div>
I have solved this issue in the help of my colleague, as follows:
.main {
margin: 10px;
background: green;
overflow: scroll;
border-radius: 20px;
}
.main .wrapper {
height: 250px;
overflow: scroll;
border-radius: 20px;
}
I add a wrapper element between scroll area(.main) and scroll content(ul), and then set wrapper height, overflow and border-radius the same as scroll area(.main).
But what happen when set -webkit-overflow-scrolling as touch ?
Looking forward to your answer.
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
I am trying to draw a half circle and rotate it using CSS. Like so;
To style the div.circle I use border-radius:50%; then I wrap it in an overflow:hidden; div.mask that is half the width of the circle, thus hiding half of the circle. Then I use transform:rotate(45deg) to rotate the div.mask. This works fine in all browsers that I've tested.
<div class="mask">
<div class="circle"></div>
</div>
.mask {
outline: 1em solid red;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
background: blue;
width: 200%;
height: 100%;
}
But when I place this element in a block that has overflow-scrolling:touch; and overflow:scroll; and view it on Mobile Safari on iOS7 the half circle becomes a full circle because the overflow:hidden; on the div.mask doesn't seem to have an effect anymore.
.scroller {
border: 1em solid green;
overflow: scroll;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
How do I fix this?
Here's a live example
I'm trying to create a pointy button like this:
So far, I was only able to achieve this:
I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.
HTML
<a class="button">Back</a>
CSS
.button {
display: inline-block;
height: 3em;
padding: 0 0.7em 0 1.4em;
border: 0.1em solid black;
border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
background: -moz-linear-gradient(
top,
#fff,
#ccc
);
}
You don't want to be using border-radius as that assigns a quarter-circle shape to each specified corner. Instead you hack it with specific border-width properties, as illustrated in this site: http://www.howtocreate.co.uk/tutorials/css/slopes
However I feel you're solving the problem the wrong way; what you're doing is best done using a background image, which is how the iOS-style Back buttons are implemented in iPhone-for-web stylesheets. If you need something resolution-independent then you can use SVG without penalty now.
Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.
HTML
Back
CSS
a.button {
text-decoration:none;
color:#111;
text-shadow:0 1px 0 #fff;
font-weight:bold;
padding:10px 10px;
font-size:14px;
border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #666;
border-left:0;
background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);
}
a.button:after {
content:"";
width:25px;
height:25px;
background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:5px;
left:-14px;
z-index:-1;
border:1px solid #666;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
border-left:0;
left:-13px;
}
The last rule is for Chrome, which otherwise renders the result slightly differently.
Hope this helps.
You can create such an effect using 2 elements side by side wrapped in the anchor tags.
<style type="text/css">
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid orange;
float:left;
}
.button {
float:left;
height:60px;
background:orange;
width:50px;
line-height:60px;
font-weight:bold;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
</style>
</div><div class="button">Back</div>
I'm not sure if it's the most refined solution, but it certainly looks the same as your concept art and functions as intended.
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated