I've this small issue, I've created an HTML5 website with ASP.NET where the header is fixed, but on iPad and iPhone it scroll really slow so I had to use this small code in my CSS:
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
The scroll issue is gone but the fixed header doesn't work anymore on apple products. But on Windows and Android it works like a charm.
Also I had an autoplay video that plays when its visible and now it doesn't work anymore on any device.
My code:
<style>
body, html, form {
width: 100%;
height: 100%;
min-height: 100%;
overflow-x: hidden;
-webkit-transform: translateZ(0);
}
#wr {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
#header .fixed-menu {
position: fixed;
width: 100%;
z-index: 100;
}
#header .menu {
float: right;
font-family: 'Oswald', sans-serif;
font-size: 14px;
}
</style>
Please help (and sorry for my bad English)
Related
I am building an app using Ionic Framework. While I was working on an app, I faced the problem.
When I tested on browser(using Chrome) and Galaxy Note5, everything was fine. However, when I tested the same app on Galaxy Note3, it gave me undesired result.
display: flex with align-items:center should align span inside ion-row vertically middle. But it only works in browser such as Chrome (I only tested on Chrome) and Galaxy Note5, not on Galaxy Note3.
What is the cause of the problem? How could I solve this problem? Any suggestion or advice would be appreciated.
Thank you in advance.
Html
<ion-row (click)="(!this.driver_docs.Insurance ? takePicture('Insurance') : (!this.driver_docs.Insurance.Examination ? view(this.driver_docs.Insurance.ori_info, 'Insurance', 'False') : view(this.driver_docs.Insurance.ori_info, 'Insurance', 'True')))">
<img class="management-icon" src="assets/images/mypage/insurance.png" />
<span class="title">Insurance Managment</span>
</ion-row>
CSS
ion-row {
position: relative;
height: 57px;
display: flex;
align-items: center;
border-bottom: 1px solid #E3E3E3;
}
.title {
position: absolute;
left: 43px;
font-size: 15px;
font-weight: 400;
color: #545556;
}
Used flexbox with prefixes
ion-row {
position: relative;
height: 57px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #E3E3E3;
.title {
position: absolute;
left: 43px;
font-size: 15px;
font-weight: 400;
color: #545556;
}
}
It may be a mobile responsiveness issue, galaxy note 5 resolution is 1140x2560 , while galaxy note 3 is 1080x1920 ..you can try to add #media styles to these resolutions to solve the issue.
On desktop it works but on Android as if taking the position: absolute or nothing or I don't know.
This is my code:
#only_900{
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--backface-visibility: hidden !important;
--webkit-transform: translateZ(0);
}
#grid1wrap{
--webkit-backface-visibility: hidden !important;
--backface-visibility: hidden !important;
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--webkit-transform: translateZ(0);
}
I'm pretty sure that this problem is because of the way the various browsers interpret the code. I think that new browsers only make the html as big as the content inside, therefor the HTML and body are not reaching the bottom. Try adding the following CSS code.
html,
body {
height: 100%;
}
I'm building a Cordova app and I'm wondering why I'm seeing the same font render differently between the Chromium WebView (embedded in the cordova app) and on the Chrome app on Android 4.4.2.
As you can see, the WebView version seems to bump up the font by a few pixels. Here's the computed styles:
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
background-color: #FFF;
border-bottom-left-radius: 7.5px;
border-bottom-right-radius: 7.5px;
border-top-left-radius: 7.5px;
border-top-right-radius: 7.5px;
color: #4F9EF7;
cursor: pointer;
display: block;
font-family: Museo-900;
font-size: 20px;
height: 50px;
line-height: 50px;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 20px;
padding-right: 20px;
position: relative;
text-align: center;
text-overflow: ellipsis;
visibility: visible;
white-space: nowrap;
width: 295px;
z-index: 0;
Why would they render differently if they're backed by the same technology? How might I even detect the different environments and style accordingly?
I'm having the same issue and it seems to be the line-height property that's not being used the same in the webview. I need to have a bigger line-height in the webview than in chrome.
chrome & webview version 78.0.3904.96
I have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.
Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
I'm using the new panel widget from jQuery mobile. But i think it has a bug. I can't scroll inside the panel if its content is bigger then the actual "content".
To see what I mean, please check out this on an Android device and try to scroll inside the panel.
you can add two attributes in css to fix the scroll
height: 100%;
overflow-y: scroll;
<div data-role="panel" id="mypanel" style=" height: 100%; overflow-y: scroll;">
I hope this work in Android, Please try.
Problem is fixed with jquery-mobile 1.3 RC1.
Try to clear ui-panel-inner and add overflow: scroll to ui-panel
.ui-panel {
width: 17em;
min-height: 100%;
border-width: 0;
position: absolute !important;
overflow: scroll !important;
top: 0;
display: block;
padding: 0 !important;
margin: 0 !important;
}
.ui-panel-inner:after {
content: '.';
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
display: block;
}