for React Apps, when i want to hide the scrollbar using WEKBIT apparently i doesn't work on iOS web-view.
i'm using this code :
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
overflow: hidden;
}
::-webkit-scrollbar-track {
background-color: transparent;
overflow-y: hidden;
display: none;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:focus {
background-color: transparent;
overflow-y: hidden;
display: none;
}
and it always shown up everytime, how do i fix that?
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
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?
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
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'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.