I have a very weird bug in my JavaScript library on mobile Safari, that I've tried to reproduce with a simple example:
I have basic css and html:
html,
body {
margin: 0;
padding: 0;
font-family: monospace;
}
body {
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
#term {
background: black;
color: #ccc;
height: 100%;
}
h1 {
margin: 0;
font-weight: normal;
}
html:
...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="term" contenteditable>
<h1>HELLO Mobile</h1>
...
and when I open the website on mobile Safari and open the virtual keyboard, I can scroll down outside of the content.
Here is the screenshot from BrowserStack when I hover over body, I'm not able to hover over html to highlight it.
Does anybody know how to fix this issue? It looks like a basic page.
Here is the link to the website: https://terminal.jcubic.pl/mobile.html
As you can see from the code I've tried to fix the issue by adding:
-webkit-fill-available
Found in an article: CSS fix for 100vh in mobile WebKit by Chris Coyier. But it doesn't make any change.
Is there a way to get rid of that white space, it seems that even CodePen has this issue. Is it a bug in Mobile Safari, is there a hack to fix it?
EDIT:
I think that this is a long-standing issue and Apple doesn't care how miserable users and developers are. Safari on iOS scrolls beyond element when virtual keyboard is opened
Try this:
JS File:
const appHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()
CSS File:
:root {
--app-height: 100%;
}
html,
body {
padding: 0;
margin: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
height: var(--app-height);
}
It may help
Have you tried:
body {
margin: 0 auto;
}
Related
I'm trying to make the scrollbar of a div (not the entire body) always visible, it works everywhere except on Safari & Chrome on iOS.
It looks like ::-webkit-scrollbar doesn't work on iOS.
The CSS that I've tried, that works everywhere but on iOS:
::-webkit-scrollbar {
width: 20px;
background: red;
}
Do you know any workaround to make it work? Do you know why iOS doesn't support that?
Thanks!
Try:
html,
html > * {
-moz-overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 20px;
background: red;
}
Hope this works.
I have a bit of code that looks like this:
<style>
#block {
opacity: 1.0;
width: 50px;
height: 50px;
background-image: url("file:///Users/myname/Desktop/Coding/person.png");
margin-top: 0px;
margin-left: 0px;
}
</style>
I got this file path from right clicking the file then clicking "Open in Chrome" then copying the file path in the search bar. When I press F12 to see the dev tools, and go to the div this is linked up to, it shows a preview of the image I want to use when I hover over the file name. But on the actual file, it doesn't show anything. Also, I know that the problem isn't with the div because when I change it to a background color, rather than an image, it shows perfectly.
<!doctype html>
<html>
<head>
<style>
#block {
opacity: 1.0;
width: 50px;
height: 50px;
background-image: url(person.png);
background-repeat: no-repeat;
margin-top: 0px;
margin-left: 0px;
}
</style>
</head>
</html>
Unfortunately bro file:///Users/myname/Desktop/Coding/person.png is not a valid link. Try getting the image you want on its assets folder found in the sources in devtools.
I need my "column" class in the internal CSS to float center while the external CSS has it set to left.
Here is my CSS file:
body { text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
#report { width: 1269px; margin: auto; float: left;
}
div.column{ margin-top: 10px; padding: 0px 0px; float: left; }
div.first{ padding-right: 8px; border-right: 1px grey solid; }
div.second{ margin-left: 8px;
}
...
Here is my HTML with internal CSS:
<!DOCTYPE html>
<html>
<head>
<title>Dual Server Report</title>
<link rel="stylesheet" type="text/css" href="ServerReport.css">
<style type="text/css">
div.column{ float: center; }
</style>
</head>
<body>
<div id="report">
<h1>Automated PowerShell Install Report</h1>
<h2>This report was ran: 07/07/2015 09:03:21</h2>
<div class="column">
...
I checked out these three similar questions but nothing I tried worked.
Internal Stylesheet NOT overriding External stylesheet?
“Inner” CSS Not Overriding “Outer” CSS
Overriding External CSS
Edit:
I remembered looking up the "float" property yesterday but I did not remember what I found; I feel pretty silly for posting this before going to double check. It makes sense that float would not have a center property.
I'll leave this up in case anyone in the future makes a similar mistake. Thanks to everyone who answered for being so respectful in pointing out this error I should have found on my own.
The property value of float: center does not exist.
The float property has four values: left, right, none, and inherit.
The only valid values for float are: left, right, none, inherit.
So this code will be skipped and not override the css file.
Please look here for more information on the float property.
There is nothing like float: center in CSS
Another way to do it
Change your CSS under the html page
div.column
{
float: none;
margin: auto;
width: 200px; /* set the width (Except 'auto') */
}
This code is working great in firefox n chrome but not in Internet Explorer.
Please me some solution.
<style>
div.cursor_green
{
cursor: url(pncl_green.png), auto;
}
</style>
You should convert your image in cur format that work great.
<style>
div.cursor_green
{
cursor: url(pncl_green.cur), auto;
}
</style>
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.