I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
The select box i use to "sort products" on our wordpress website is causing some styling issues on IOS devices.
I want the select box to have a rounded corners. It does this on IOS but it shows the edges of its default styles and overflow:hidden is not working
How do i remove the corners?
select {
width: auto;
height: 30px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-khtml-border-radius: 40px;
text-indent: 7px;
overflow: hidden;
outline: 0;
}
<select name="orderby" class="orderby"><option value="popularity">Sort by popularity</option><option value="rating">Sort by average rating</option><option value="date">Sort by newness</option><option value="price">Sort by price: low to high</option><option value="price-desc">Sort by price: high to low</option><option value="alphabetical">Sort by name: A to Z</option><option value="reverse_alpha">Sort by name: Z to A</option><option value="on_sale_first">Show sale items first</option><option value="random_list" selected="selected">Random</option> </select>
iOS devices do not seem to support border-radius of more than 10px. So you can either make your border-radius 10px for all devices or you can target Safari on ios devices like below:
#supports (-webkit-touch-callout: none) {
/* ios device specific */
select, select.form-control {
border-radius: 10px;
}
}
If you do want to have 40px of border-radius on iOS devices as well, then you can remove the background altogether and then use a custom arrow image (as this will also remove the arrow)
select, select.form-control {
-webkit-appearance: none;
-webkit-border-radius: 0px;
background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
background-position: 100% 50%;
background-repeat: no-repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i'm creating my first web site and it's going great, looks good, and works properly. The problem i have is that i just uploaded the files to the web hosting to see how is it looking across different devices, looks great on my Smart TV, on my Android phone, on the MacBook, BUT on the iPhone and the iPad everything looks bad.
The slider is no longer overflowing, the widht is not working, even the menu buton is gone and the nav is always showing, please i need some help with this, is there some code to add so this can work on IOs movile devices?
I been looking the internet for hours trying to find the solution, i found something that includes this code:
-webkit-appearance: none;
But nothing happens everything looks bad.Thanks in advance.
You are using CSS properties that need to be prefixed in order to work in -webkit browsers, even in newer versions, such as display:flex, justify-content, transition, flex-direction,...
The practical solution is to write normal (up to date) CSS and than run it through a tool that will add the necessary prefixes for making it compatible with most browsers. It's called auto-prefixing and you can read more about it here. Good auto-prefixing tools are connected to caniuse and can be configured for various specific needs (prefix for last three versions from each browser, or prefix for all browsers with an above X usage percentage, or combinations between the two).
Here are the auto-prefixed versions of your project's CSS files. Replace assets/css/header.css with:
*{
margin: 0;
padding: 0;
-webkit-appearance: none;
}
header{
z-index: 1000;
position: fixed;
width: 100%;
font-family: "roboto";
background-color: rgba(0, 0, 0, 0.7);
}
#btn-menu{
display: none;
}
header label{
display: none;
height: 30px;
width: 30px;
padding: 10px;
}
header label:hover{
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu li:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.menu li a{
display: block;
padding: 20px 20px 10px 20px;
color: #fff;
text-decoration: none;
}
#media (max-width: 768px) {
header label {
height: 60px;
width: 60px;
padding: 10px;
display: block;
}
.menu{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 30%;
margin-left: -30%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#btn-menu:checked ~ .menu{
margin: 0;
}
}
And assets/css/body.css with:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
body{
z-index: 500;
position: relative;
}
#logo{
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#logo-image{
width: 100%;
max-width: 650px;
}
#containerslider{
padding-top: 59px;
position: relative;
margin: auto;
width: 100%;
max-width: 1920px;
overflow: hidden;
}
.slider{
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 400%;
}
.slider .section{
display: block;
height:100%;
width: 100%;
}
.slider img{
display: block;
height: 100%;
width: 100%;
}
.btn-prev, .btn-next{
width: 50px;
height: 50px;
color: white;
font-family: sans-serif; "roboto";
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 50px;
font-size: 22px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.btn-prev{
left: 10px;
}
.btn-next{
right: 10px;
}
.btn-prev:hover, .btn-next:hover{
background: rgba(0, 0, 0, 0.9);
}
.space{
height: 2000px;
}
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